feat: full redesign - sidebar layout, room tabs, device cards
All checks were successful
Deploy to Coolify / deploy (push) Successful in 3s
All checks were successful
Deploy to Coolify / deploy (push) Successful in 3s
This commit is contained in:
Cosmo
267
app/globals.css
267
app/globals.css
@@ -1,250 +1,65 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--bg: #090912;
|
||||
--card-bg: rgba(255, 255, 255, 0.04);
|
||||
--card-border: rgba(255, 255, 255, 0.08);
|
||||
--text-primary: rgba(255, 255, 255, 0.95);
|
||||
--text-secondary: rgba(255, 255, 255, 0.45);
|
||||
--accent: #6366f1;
|
||||
--accent-2: #8b5cf6;
|
||||
}
|
||||
|
||||
.light {
|
||||
--bg: #f0f0f8;
|
||||
--card-bg: rgba(255, 255, 255, 0.75);
|
||||
--card-border: rgba(0, 0, 0, 0.07);
|
||||
--text-primary: rgba(15, 15, 30, 0.95);
|
||||
--text-secondary: rgba(15, 15, 30, 0.45);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
:root {
|
||||
--bg: #0a0a14;
|
||||
--sidebar-bg: rgba(255, 255, 255, 0.02);
|
||||
--card-bg: rgba(255, 255, 255, 0.05);
|
||||
--card-border: rgba(255, 255, 255, 0.08);
|
||||
--text-primary: rgba(255, 255, 255, 0.92);
|
||||
--text-secondary: rgba(255, 255, 255, 0.45);
|
||||
--accent: #00d4ff;
|
||||
--accent-glow: rgba(0, 212, 255, 0.15);
|
||||
--on-color: #00d4ff;
|
||||
--off-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
html, body {
|
||||
background: var(--bg);
|
||||
color: var(--text-primary);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
touch-action: manipulation;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#__next, main {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
button:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Glassmorphism card */
|
||||
.glass-card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--card-border);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 24px;
|
||||
transition: background 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(99, 102, 241, 0.35);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Big toggle switch (60×32) */
|
||||
.toggle-track {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-thumb {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.toggle-on .toggle-thumb {
|
||||
transform: translateX(28px);
|
||||
}
|
||||
|
||||
/* Custom range slider */
|
||||
input[type='range'] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.light input[type='range'] {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #f59e0b;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #f59e0b;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
|
||||
}
|
||||
|
||||
/* Ambient orbs */
|
||||
.orb {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* No select on interactive elements in tablet mode */
|
||||
.no-select {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
.progress-bar {
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.light .progress-bar {
|
||||
background: rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(90deg, #6366f1, #8b5cf6);
|
||||
transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
/* Glow effects */
|
||||
.glow-amber {
|
||||
box-shadow: 0 0 24px rgba(245, 158, 11, 0.4);
|
||||
}
|
||||
|
||||
.glow-blue {
|
||||
box-shadow: 0 0 24px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.glow-green {
|
||||
box-shadow: 0 0 24px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
|
||||
.glow-purple {
|
||||
box-shadow: 0 0 24px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
/* Modal backdrop */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Spin animation for air purifier */
|
||||
@keyframes spin-slow {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.spin-slow {
|
||||
animation: spin-slow 4s linear infinite;
|
||||
}
|
||||
|
||||
/* Orb animations */
|
||||
@keyframes orbMove1 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
33% { transform: translate(40px, -30px) scale(1.05); }
|
||||
66% { transform: translate(-20px, 20px) scale(0.97); }
|
||||
}
|
||||
@keyframes orbMove2 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
33% { transform: translate(-50px, 30px) scale(1.08); }
|
||||
66% { transform: translate(30px, -20px) scale(0.95); }
|
||||
}
|
||||
@keyframes orbMove3 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(20px, 40px) scale(1.04); }
|
||||
}
|
||||
@keyframes orbMove4 {
|
||||
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;
|
||||
}
|
||||
|
||||
/* Safe area support for tablets/mobile */
|
||||
@supports (padding: max(0px)) {
|
||||
body {
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure 100dvh works properly */
|
||||
.h-dvh {
|
||||
height: 100dvh;
|
||||
height: 100svh;
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
578
app/page.tsx
578
app/page.tsx
@@ -1,362 +1,312 @@
|
||||
"use client";
|
||||
'use client'
|
||||
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import TopBar from "@/components/TopBar";
|
||||
import BottomNav from "@/components/BottomNav";
|
||||
import LightCard from "@/components/cards/LightCard";
|
||||
import TemperatureCard from "@/components/cards/TemperatureCard";
|
||||
import AirPurifierCard from "@/components/cards/AirPurifierCard";
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import Sidebar from '@/components/Sidebar'
|
||||
import TopBar from '@/components/TopBar'
|
||||
import RoomTabs from '@/components/RoomTabs'
|
||||
import DeviceCard from '@/components/DeviceCard'
|
||||
|
||||
import WeatherCard from "@/components/cards/WeatherCard";
|
||||
import RoomsRow from "@/components/RoomsRow";
|
||||
import { useHA, useWeather } from "@/hooks/useHA";
|
||||
type Tab = 'home' | 'rooms' | 'sensors' | 'settings'
|
||||
|
||||
// Stagger container variants
|
||||
const containerVariants = {
|
||||
hidden: {},
|
||||
visible: { transition: { staggerChildren: 0.07 } },
|
||||
};
|
||||
interface WeatherData {
|
||||
temp: string
|
||||
desc: string
|
||||
humidity: string
|
||||
windSpeed: string
|
||||
feelsLike: string
|
||||
forecast?: { date: string; maxTemp: string; minTemp: string; desc: string }[]
|
||||
}
|
||||
|
||||
const cardVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
|
||||
};
|
||||
interface SensorData {
|
||||
temperature: number
|
||||
humidity: number
|
||||
pm25: number
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const [isDark, setIsDark] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState("home");
|
||||
const [roomFilter, setRoomFilter] = useState<string | null>(null);
|
||||
interface HaStates {
|
||||
[key: string]: { state: string; attributes?: Record<string, any>; _mock?: boolean }
|
||||
}
|
||||
|
||||
const { data: haData, loading: haLoading, refresh: refreshHA } = useHA(15000);
|
||||
const weather = useWeather();
|
||||
const ROOMS = [
|
||||
{ id: 'living', name: 'Гостиная', emoji: '🛋️', deviceCount: 3 },
|
||||
{ id: 'bedroom', name: 'Спальня', emoji: '🛏️', deviceCount: 2 },
|
||||
{ id: 'kitchen', name: 'Кухня', emoji: '🍳', deviceCount: 0 },
|
||||
{ id: 'bathroom', name: 'Ванная', emoji: '🚿', deviceCount: 0 },
|
||||
]
|
||||
|
||||
// Apply theme to html element
|
||||
const DEVICES_BY_ROOM: Record<string, {
|
||||
id: string
|
||||
name: string
|
||||
icon: string
|
||||
entityId?: string
|
||||
domain?: string
|
||||
haKey?: string
|
||||
isMock?: boolean
|
||||
}[]> = {
|
||||
living: [
|
||||
{
|
||||
id: 'air_purifier',
|
||||
name: 'Очиститель воздуха',
|
||||
icon: '💨',
|
||||
entityId: 'fan.zhimi_rmb1_9528_air_purifier',
|
||||
domain: 'fan',
|
||||
haKey: 'fan.air_purifier',
|
||||
isMock: false,
|
||||
},
|
||||
{
|
||||
id: 'light_living',
|
||||
name: 'Свет',
|
||||
icon: '💡',
|
||||
entityId: 'light.living_room',
|
||||
domain: 'light',
|
||||
haKey: 'light.living_room',
|
||||
isMock: true,
|
||||
},
|
||||
{
|
||||
id: 'tv',
|
||||
name: 'Телевизор',
|
||||
icon: '📺',
|
||||
isMock: true,
|
||||
},
|
||||
],
|
||||
bedroom: [
|
||||
{
|
||||
id: 'light_bedroom',
|
||||
name: 'Свет',
|
||||
icon: '💡',
|
||||
entityId: 'light.bedroom',
|
||||
domain: 'light',
|
||||
haKey: 'light.bedroom',
|
||||
isMock: true,
|
||||
},
|
||||
{
|
||||
id: 'ac',
|
||||
name: 'Кондиционер',
|
||||
icon: '❄️',
|
||||
isMock: true,
|
||||
},
|
||||
],
|
||||
kitchen: [],
|
||||
bathroom: [],
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
const [tab, setTab] = useState<Tab>('home')
|
||||
const [activeRoom, setActiveRoom] = useState('living')
|
||||
const [weather, setWeather] = useState<WeatherData | null>(null)
|
||||
const [sensors, setSensors] = useState<SensorData | null>(null)
|
||||
const [haStates, setHaStates] = useState<HaStates>({})
|
||||
|
||||
// Load weather
|
||||
useEffect(() => {
|
||||
const html = document.documentElement;
|
||||
if (isDark) {
|
||||
html.classList.add("dark");
|
||||
html.classList.remove("light");
|
||||
document.body.classList.remove("light");
|
||||
} else {
|
||||
html.classList.remove("dark");
|
||||
html.classList.add("light");
|
||||
document.body.classList.add("light");
|
||||
const load = async () => {
|
||||
try {
|
||||
const r = await fetch('/api/weather')
|
||||
const d = await r.json()
|
||||
if (d.temp && d.temp !== '—') setWeather(d)
|
||||
} catch {}
|
||||
}
|
||||
}, [isDark]);
|
||||
load()
|
||||
const t = setInterval(load, 600_000)
|
||||
return () => clearInterval(t)
|
||||
}, [])
|
||||
|
||||
const states = haData?.states || {};
|
||||
const isDemo = haData?.demo || false;
|
||||
// Load HA states + sensors
|
||||
const loadHA = useCallback(async () => {
|
||||
try {
|
||||
const r = await fetch('/api/ha')
|
||||
const d = await r.json()
|
||||
if (d.states) setHaStates(d.states)
|
||||
if (d.sensors) setSensors(d.sensors)
|
||||
} catch {}
|
||||
}, [])
|
||||
|
||||
const handleHAUpdate = useCallback(() => {
|
||||
setTimeout(refreshHA, 500);
|
||||
}, [refreshHA]);
|
||||
useEffect(() => {
|
||||
loadHA()
|
||||
const t = setInterval(loadHA, 30_000)
|
||||
return () => clearInterval(t)
|
||||
}, [loadHA])
|
||||
|
||||
const handleRoomClick = useCallback((roomId: string) => {
|
||||
setActiveTab("devices");
|
||||
setRoomFilter(roomId);
|
||||
}, []);
|
||||
const devicesInRoom = DEVICES_BY_ROOM[activeRoom] || []
|
||||
|
||||
const livingRoom = states["light.living_room"];
|
||||
const bedroom = states["light.bedroom"];
|
||||
const thermostat = states["climate.thermostat"];
|
||||
const airPurifier = states["fan.air_purifier"];
|
||||
const getDeviceState = (haKey?: string): boolean => {
|
||||
if (!haKey || !haStates[haKey]) return false
|
||||
return haStates[haKey].state === 'on'
|
||||
}
|
||||
|
||||
const getDeviceExtra = (id: string): string | undefined => {
|
||||
if (id === 'air_purifier' && sensors) {
|
||||
return `PM2.5: ${sensors.pm25}`
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative w-screen overflow-hidden"
|
||||
style={{ height: "100dvh", background: "var(--bg)" }}
|
||||
>
|
||||
{/* Ambient orbs */}
|
||||
<div
|
||||
className="orb"
|
||||
style={{
|
||||
width: 480,
|
||||
height: 480,
|
||||
top: "-12%",
|
||||
left: "-8%",
|
||||
background: isDark ? "rgba(245,158,11,0.09)" : "rgba(245,158,11,0.06)",
|
||||
animation: "orbMove1 22s ease-in-out infinite",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="orb"
|
||||
style={{
|
||||
width: 420,
|
||||
height: 420,
|
||||
bottom: "0%",
|
||||
right: "-8%",
|
||||
background: isDark ? "rgba(139,92,246,0.1)" : "rgba(139,92,246,0.06)",
|
||||
animation: "orbMove2 28s ease-in-out infinite",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="orb"
|
||||
style={{
|
||||
width: 360,
|
||||
height: 360,
|
||||
top: "30%",
|
||||
left: "35%",
|
||||
background: isDark ? "rgba(59,130,246,0.07)" : "rgba(59,130,246,0.04)",
|
||||
animation: "orbMove3 34s ease-in-out infinite",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 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}
|
||||
/>
|
||||
|
||||
{/* Rooms row — only on home tab */}
|
||||
<AnimatePresence>
|
||||
{activeTab === "home" && (
|
||||
<motion.div
|
||||
key="rooms-row"
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<RoomsRow onRoomClick={handleRoomClick} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Content area — fills remaining space */}
|
||||
<div className="flex-1 min-h-0 overflow-y-auto">
|
||||
<AnimatePresence mode="wait">
|
||||
|
||||
{/* ═══════════════ HOME TAB ═══════════════ */}
|
||||
{activeTab === "home" && (
|
||||
<motion.div
|
||||
key="home"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
{/*
|
||||
Row 1: [Свет Гостиная] [Свет Спальня] [Климат]
|
||||
Row 2: [Очиститель ×2] [Погода]
|
||||
*/}
|
||||
<div
|
||||
className="grid gap-3"
|
||||
style={{
|
||||
gridTemplateColumns: "1fr 1fr 1fr",
|
||||
display: 'flex',
|
||||
height: '100dvh',
|
||||
width: '100%',
|
||||
background: 'var(--bg)',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{/* Свет Гостиная */}
|
||||
<motion.div variants={cardVariants}>
|
||||
<LightCard
|
||||
entityId="light.living_room"
|
||||
name="Гостиная"
|
||||
state={livingRoom?.state || "off"}
|
||||
brightness={livingRoom?.attributes?.brightness}
|
||||
showSlider={true}
|
||||
onUpdate={handleHAUpdate}
|
||||
/>
|
||||
</motion.div>
|
||||
<Sidebar active={tab} onChange={setTab} />
|
||||
|
||||
{/* Свет Спальня */}
|
||||
<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
|
||||
entityId="climate.thermostat"
|
||||
currentTemp={thermostat?.attributes?.current_temperature}
|
||||
targetTemp={thermostat?.attributes?.temperature}
|
||||
state={thermostat?.state || "off"}
|
||||
onUpdate={handleHAUpdate}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Очиститель воздуха — 2 колонки */}
|
||||
<motion.div
|
||||
variants={cardVariants}
|
||||
style={{ gridColumn: "span 2" }}
|
||||
<main
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
<AirPurifierCard
|
||||
entityId="fan.air_purifier"
|
||||
state={airPurifier?.state || "off"}
|
||||
presetMode={airPurifier?.attributes?.preset_mode}
|
||||
onUpdate={handleHAUpdate}
|
||||
/>
|
||||
</motion.div>
|
||||
<TopBar weather={weather} sensors={sensors} />
|
||||
|
||||
{/* Погода — правый нижний */}
|
||||
<motion.div variants={cardVariants}>
|
||||
<WeatherCard weather={weather} />
|
||||
</motion.div>
|
||||
{tab === 'home' && (
|
||||
<>
|
||||
<RoomTabs rooms={ROOMS} active={activeRoom} onChange={setActiveRoom} />
|
||||
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
WebkitOverflowScrolling: 'touch' as any,
|
||||
padding: '16px 20px 24px',
|
||||
}}
|
||||
>
|
||||
{devicesInRoom.length === 0 ? (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: 200,
|
||||
color: 'var(--text-secondary)',
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 40 }}>🏠</span>
|
||||
<span style={{ fontSize: 15 }}>Устройства не добавлены</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* ═══════════════ DEVICES TAB ═══════════════ */}
|
||||
{activeTab === "devices" && (
|
||||
<motion.div
|
||||
key="devices"
|
||||
className="h-full flex flex-col gap-3"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
{/* 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",
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(2, 1fr)',
|
||||
gap: 12,
|
||||
}}
|
||||
>
|
||||
<motion.div variants={cardVariants}>
|
||||
<LightCard
|
||||
entityId="light.living_room"
|
||||
name="Гостиная"
|
||||
state={livingRoom?.state || "off"}
|
||||
brightness={livingRoom?.attributes?.brightness}
|
||||
showSlider={true}
|
||||
onUpdate={handleHAUpdate}
|
||||
{devicesInRoom.map(device => (
|
||||
<DeviceCard
|
||||
key={device.id}
|
||||
id={device.id}
|
||||
name={device.name}
|
||||
icon={device.icon}
|
||||
entityId={device.entityId}
|
||||
domain={device.domain}
|
||||
initialState={getDeviceState(device.haKey)}
|
||||
isMock={device.isMock}
|
||||
extraInfo={getDeviceExtra(device.id)}
|
||||
/>
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ═══════════════ SETTINGS TAB ═══════════════ */}
|
||||
{activeTab === "settings" && (
|
||||
<motion.div
|
||||
key="settings"
|
||||
className="h-full flex items-center justify-center"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
{tab === 'rooms' && (
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 12,
|
||||
color: 'var(--text-secondary)',
|
||||
}}
|
||||
>
|
||||
<div className="glass-card p-8 max-w-md w-full text-center">
|
||||
<div className="text-4xl mb-4">⚙️</div>
|
||||
<h2
|
||||
className="text-lg font-semibold mb-2"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
Настройки
|
||||
</h2>
|
||||
<p
|
||||
className="text-sm mb-6"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Умный дом подключён. Когда появятся устройства — они появятся автоматически.
|
||||
</p>
|
||||
<span style={{ fontSize: 48 }}>🏠</span>
|
||||
<span style={{ fontSize: 16 }}>Управление комнатами</span>
|
||||
<span style={{ fontSize: 13 }}>Скоро</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3 text-left">
|
||||
{tab === 'sensors' && sensors && (
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
padding: '20px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 12,
|
||||
}}
|
||||
>
|
||||
<h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 8 }}>Датчики</h2>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
|
||||
{[
|
||||
{ label: "HA URL", value: "✅ Настроен" },
|
||||
{ label: "HA Token", value: isDemo ? "❌ Не настроен" : "✅ Настроен" },
|
||||
{ label: "Vikunja", value: "✅ Подключён" },
|
||||
{ label: "Pulse API", value: "✅ Подключён" },
|
||||
{ label: "Очиститель", value: (airPurifier as any)?._mock ? "⚡ Демо" : "✅ Реальный" },
|
||||
].map((item) => (
|
||||
{ label: 'Температура', value: `${sensors.temperature}°C`, icon: '🌡️' },
|
||||
{ label: 'Влажность', value: `${sensors.humidity}%`, icon: '💧' },
|
||||
{ label: 'PM2.5', value: `${sensors.pm25} μg/m³`, icon: '💨' },
|
||||
].map(s => (
|
||||
<div
|
||||
key={item.label}
|
||||
className="flex justify-between items-center px-4 py-3 rounded-2xl"
|
||||
key={s.label}
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.04)",
|
||||
border: "1px solid rgba(255,255,255,0.06)",
|
||||
background: 'var(--card-bg)',
|
||||
border: '1px solid var(--card-border)',
|
||||
borderRadius: 18,
|
||||
padding: 20,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<span className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||
{item.label}
|
||||
</span>
|
||||
<span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
|
||||
{item.value}
|
||||
</span>
|
||||
<span style={{ fontSize: 28 }}>{s.icon}</span>
|
||||
<div style={{ fontSize: 22, fontWeight: 700 }}>{s.value}</div>
|
||||
<div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* 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} />
|
||||
{tab === 'sensors' && !sensors && (
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'var(--text-secondary)',
|
||||
}}
|
||||
>
|
||||
Загрузка датчиков...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'settings' && (
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 12,
|
||||
color: 'var(--text-secondary)',
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 48 }}>⚙️</span>
|
||||
<span style={{ fontSize: 16 }}>Настройки</span>
|
||||
<span style={{ fontSize: 13 }}>Скоро</span>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,108 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { X, Plus } from "lucide-react";
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onAdd: (title: string) => void;
|
||||
}
|
||||
|
||||
export default function AddTaskModal({ open, onClose, onAdd }: Props) {
|
||||
const [title, setTitle] = useState("");
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!title.trim()) return;
|
||||
onAdd(title.trim());
|
||||
setTitle("");
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
className="modal-backdrop"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={onClose}
|
||||
>
|
||||
<motion.div
|
||||
className="glass-card p-6 w-96 mx-4"
|
||||
style={{ border: "1px solid rgba(99,102,241,0.3)" }}
|
||||
initial={{ opacity: 0, scale: 0.85, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.85, y: 20 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 30 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<h3
|
||||
className="text-lg font-semibold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
Новая задача
|
||||
</h3>
|
||||
<motion.button
|
||||
onClick={onClose}
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center"
|
||||
style={{ background: "rgba(255,255,255,0.08)" }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<X size={16} color="var(--text-secondary)" />
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
|
||||
placeholder="Название задачи..."
|
||||
autoFocus
|
||||
className="w-full px-4 py-3 rounded-xl text-sm outline-none mb-4"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.06)",
|
||||
border: "1px solid rgba(255,255,255,0.1)",
|
||||
color: "var(--text-primary)",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<motion.button
|
||||
onClick={onClose}
|
||||
className="flex-1 py-3 rounded-xl text-sm font-medium"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.06)",
|
||||
color: "var(--text-secondary)",
|
||||
border: "1px solid rgba(255,255,255,0.08)",
|
||||
}}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
Отмена
|
||||
</motion.button>
|
||||
<motion.button
|
||||
onClick={handleSubmit}
|
||||
className="flex-1 py-3 rounded-xl text-sm font-semibold flex items-center justify-center gap-2"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(135deg, #6366f1, #8b5cf6)",
|
||||
color: "white",
|
||||
boxShadow: "0 0 20px rgba(99,102,241,0.4)",
|
||||
}}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
disabled={!title.trim()}
|
||||
>
|
||||
<Plus size={16} />
|
||||
Добавить
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Home, Cpu, Settings } from "lucide-react";
|
||||
|
||||
interface Props {
|
||||
active: string;
|
||||
onChange: (tab: string) => void;
|
||||
}
|
||||
|
||||
const TABS = [
|
||||
{ id: "home", label: "Главная", icon: Home, color: "#6366f1" },
|
||||
{ id: "devices", label: "Устройства", icon: Cpu, color: "#3b82f6" },
|
||||
{ id: "settings", label: "Настройки", icon: Settings, color: "#10b981" },
|
||||
];
|
||||
|
||||
export default function BottomNav({ active, onChange }: Props) {
|
||||
return (
|
||||
<motion.div
|
||||
className="glass-card px-3 py-2 flex items-center justify-around no-select flex-shrink-0"
|
||||
style={{ borderRadius: "20px" }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{TABS.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = active === tab.id;
|
||||
return (
|
||||
<motion.button
|
||||
key={tab.id}
|
||||
onClick={() => onChange(tab.id)}
|
||||
className="flex flex-col items-center gap-1.5 px-10 py-2 rounded-2xl relative"
|
||||
whileTap={{ scale: 0.85 }}
|
||||
>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl"
|
||||
style={{
|
||||
background: `${tab.color}15`,
|
||||
border: `1px solid ${tab.color}30`,
|
||||
boxShadow: `0 0 16px ${tab.color}20`,
|
||||
}}
|
||||
layoutId="navActive"
|
||||
transition={{ type: "spring", stiffness: 450, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
<Icon size={22} color={isActive ? tab.color : "var(--text-secondary)"} strokeWidth={isActive ? 2 : 1.5} />
|
||||
<span className="text-xs font-semibold" style={{ color: isActive ? tab.color : "var(--text-secondary)" }}>
|
||||
{tab.label}
|
||||
</span>
|
||||
</motion.button>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
141
components/DeviceCard.tsx
Normal file
141
components/DeviceCard.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
|
||||
interface DeviceCardProps {
|
||||
id: string
|
||||
name: string
|
||||
icon: string
|
||||
entityId?: string
|
||||
domain?: string
|
||||
initialState: boolean
|
||||
isMock?: boolean
|
||||
extraInfo?: string
|
||||
}
|
||||
|
||||
export default function DeviceCard({
|
||||
id,
|
||||
name,
|
||||
icon,
|
||||
entityId,
|
||||
domain,
|
||||
initialState,
|
||||
isMock = false,
|
||||
extraInfo,
|
||||
}: DeviceCardProps) {
|
||||
const [isOn, setIsOn] = useState(initialState)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const toggle = async () => {
|
||||
const next = !isOn
|
||||
setIsOn(next) // optimistic update
|
||||
|
||||
if (!isMock && entityId && domain) {
|
||||
setLoading(true)
|
||||
try {
|
||||
await fetch('/api/ha', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
domain,
|
||||
service: next ? 'turn_on' : 'turn_off',
|
||||
entity_id: entityId,
|
||||
}),
|
||||
})
|
||||
} catch {
|
||||
// revert on error
|
||||
setIsOn(!next)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: isOn ? 'rgba(0,212,255,0.06)' : 'var(--card-bg)',
|
||||
border: isOn ? '1px solid rgba(0,212,255,0.2)' : '1px solid var(--card-border)',
|
||||
borderRadius: 18,
|
||||
padding: '16px',
|
||||
minHeight: 140,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
transition: 'all 0.25s ease',
|
||||
}}
|
||||
>
|
||||
{/* Top row: icon + toggle */}
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
|
||||
<div
|
||||
style={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 12,
|
||||
background: isOn ? 'rgba(0,212,255,0.15)' : 'rgba(255,255,255,0.06)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: 22,
|
||||
transition: 'all 0.25s ease',
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
|
||||
{/* Toggle button */}
|
||||
<button
|
||||
onClick={toggle}
|
||||
disabled={loading}
|
||||
style={{
|
||||
width: 50,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
background: isOn
|
||||
? 'linear-gradient(90deg, #00b4d8, #00d4ff)'
|
||||
: 'rgba(255,255,255,0.1)',
|
||||
position: 'relative',
|
||||
transition: 'background 0.3s ease',
|
||||
flexShrink: 0,
|
||||
touchAction: 'manipulation',
|
||||
WebkitTapHighlightColor: 'transparent',
|
||||
opacity: loading ? 0.6 : 1,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 3,
|
||||
left: isOn ? 25 : 3,
|
||||
width: 22,
|
||||
height: 22,
|
||||
borderRadius: '50%',
|
||||
background: '#fff',
|
||||
boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
|
||||
transition: 'left 0.25s ease',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Bottom: name + status */}
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
color: 'var(--text-primary)',
|
||||
marginBottom: 3,
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: isOn ? 'var(--accent)' : 'var(--text-secondary)' }}>
|
||||
{isOn ? 'Включён' : 'Выключен'}
|
||||
{extraInfo && isOn ? ` · ${extraInfo}` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
73
components/RoomTabs.tsx
Normal file
73
components/RoomTabs.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
'use client'
|
||||
|
||||
interface Room {
|
||||
id: string
|
||||
name: string
|
||||
emoji: string
|
||||
deviceCount: number
|
||||
}
|
||||
|
||||
interface RoomTabsProps {
|
||||
rooms: Room[]
|
||||
active: string
|
||||
onChange: (id: string) => void
|
||||
}
|
||||
|
||||
export default function RoomTabs({ rooms, active, onChange }: RoomTabsProps) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 10,
|
||||
padding: '12px 20px',
|
||||
overflowX: 'auto',
|
||||
flexShrink: 0,
|
||||
WebkitOverflowScrolling: 'touch' as any,
|
||||
scrollbarWidth: 'none',
|
||||
msOverflowStyle: 'none',
|
||||
}}
|
||||
>
|
||||
{rooms.map(room => {
|
||||
const isActive = active === room.id
|
||||
return (
|
||||
<button
|
||||
key={room.id}
|
||||
onClick={() => onChange(room.id)}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
padding: '10px 18px',
|
||||
borderRadius: 14,
|
||||
background: isActive ? 'rgba(0,212,255,0.12)' : 'rgba(255,255,255,0.04)',
|
||||
border: isActive ? '1px solid rgba(0,212,255,0.3)' : '1px solid rgba(255,255,255,0.06)',
|
||||
minWidth: 90,
|
||||
flexShrink: 0,
|
||||
touchAction: 'manipulation',
|
||||
WebkitTapHighlightColor: 'transparent',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<span style={{ fontSize: 18 }}>{room.emoji}</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 14,
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
color: isActive ? 'var(--accent)' : 'var(--text-primary)',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{room.name}
|
||||
</span>
|
||||
</div>
|
||||
<span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>
|
||||
{room.deviceCount} {room.deviceCount === 1 ? 'устройство' : room.deviceCount >= 2 && room.deviceCount <= 4 ? 'устройства' : 'устройств'}
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
84
components/Sidebar.tsx
Normal file
84
components/Sidebar.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
'use client'
|
||||
|
||||
import { Home, LayoutGrid, Thermometer, Settings } from 'lucide-react'
|
||||
|
||||
type Tab = 'home' | 'rooms' | 'sensors' | 'settings'
|
||||
|
||||
interface SidebarProps {
|
||||
active: Tab
|
||||
onChange: (tab: Tab) => void
|
||||
}
|
||||
|
||||
const navItems: { id: Tab; icon: React.ComponentType<{ size?: number; color?: string }> }[] = [
|
||||
{ id: 'home', icon: Home },
|
||||
{ id: 'rooms', icon: LayoutGrid },
|
||||
{ id: 'sensors', icon: Thermometer },
|
||||
{ id: 'settings', icon: Settings },
|
||||
]
|
||||
|
||||
export default function Sidebar({ active, onChange }: SidebarProps) {
|
||||
return (
|
||||
<nav
|
||||
style={{
|
||||
width: 72,
|
||||
minWidth: 72,
|
||||
height: '100dvh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
paddingTop: 20,
|
||||
paddingBottom: 20,
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
WebkitBackdropFilter: 'blur(20px)',
|
||||
borderRight: '1px solid rgba(255,255,255,0.05)',
|
||||
gap: 8,
|
||||
flexShrink: 0,
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
{/* Logo */}
|
||||
<div
|
||||
style={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 14,
|
||||
background: 'linear-gradient(135deg, #00d4ff22, #00d4ff44)',
|
||||
border: '1px solid rgba(0,212,255,0.3)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 24,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Home size={20} color="#00d4ff" />
|
||||
</div>
|
||||
|
||||
{/* Nav items */}
|
||||
{navItems.map(({ id, icon: Icon }) => {
|
||||
const isActive = active === id
|
||||
return (
|
||||
<button
|
||||
key={id}
|
||||
onClick={() => onChange(id)}
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 14,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: isActive ? 'rgba(0,212,255,0.15)' : 'transparent',
|
||||
border: isActive ? '1px solid rgba(0,212,255,0.25)' : '1px solid transparent',
|
||||
transition: 'all 0.2s ease',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Icon size={22} color={isActive ? '#00d4ff' : 'rgba(255,255,255,0.4)'} />
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Sun, Moon } from "lucide-react";
|
||||
|
||||
interface Props {
|
||||
isDark: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
export default function ThemeToggle({ isDark, onToggle }: Props) {
|
||||
return (
|
||||
<motion.button
|
||||
onClick={onToggle}
|
||||
className="relative w-14 h-7 rounded-full flex items-center cursor-pointer no-select"
|
||||
style={{
|
||||
background: isDark
|
||||
? "rgba(99,102,241,0.3)"
|
||||
: "rgba(245,158,11,0.3)",
|
||||
border: `1px solid ${isDark ? "rgba(99,102,241,0.5)" : "rgba(245,158,11,0.5)"}`,
|
||||
}}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute w-5 h-5 rounded-full flex items-center justify-center"
|
||||
style={{
|
||||
background: isDark ? "#6366f1" : "#f59e0b",
|
||||
boxShadow: isDark
|
||||
? "0 0 8px rgba(99,102,241,0.8)"
|
||||
: "0 0 8px rgba(245,158,11,0.8)",
|
||||
}}
|
||||
animate={{ x: isDark ? 2 : 28 }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
>
|
||||
{isDark ? (
|
||||
<Moon size={10} color="white" />
|
||||
) : (
|
||||
<Sun size={10} color="white" />
|
||||
)}
|
||||
</motion.div>
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
@@ -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 }}
|
||||
{/* 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>
|
||||
<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>
|
||||
{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>
|
||||
)}
|
||||
</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 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>
|
||||
<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>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
</header>
|
||||
|
||||
{/* 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 }}
|
||||
<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',
|
||||
}}
|
||||
>
|
||||
<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 }}
|
||||
<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,
|
||||
}}
|
||||
>
|
||||
{/* 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 style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
|
||||
<span style={{ fontSize: 40 }}>{getWeatherEmoji(weather.desc)}</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 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>
|
||||
|
||||
{/* 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 style={{ fontSize: 12, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>
|
||||
Прогноз
|
||||
</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>
|
||||
<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>
|
||||
)}
|
||||
</motion.div>
|
||||
</motion.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>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,141 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Wind } from "lucide-react";
|
||||
import { toggleFan, setFanPreset } from "@/lib/api";
|
||||
|
||||
interface Props {
|
||||
entityId: string;
|
||||
state: string;
|
||||
presetMode?: string;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
const MODES = [
|
||||
{ id: "Auto", label: "Авто", color: "#10b981" },
|
||||
{ id: "Night", label: "Ночь", color: "#6366f1" },
|
||||
{ id: "High", label: "Турбо", color: "#f59e0b" },
|
||||
];
|
||||
|
||||
export default function AirPurifierCard({ entityId, state, presetMode, onUpdate }: Props) {
|
||||
const [localOn, setLocalOn] = useState(state === "on");
|
||||
const [currentMode, setCurrentMode] = useState(presetMode || "Auto");
|
||||
const [pending, setPending] = useState(false);
|
||||
|
||||
const handleToggle = useCallback(async () => {
|
||||
if (pending) return;
|
||||
const newState = !localOn;
|
||||
setLocalOn(newState);
|
||||
setPending(true);
|
||||
try {
|
||||
await toggleFan(entityId, newState);
|
||||
onUpdate();
|
||||
} catch (e) {
|
||||
setLocalOn(!newState);
|
||||
}
|
||||
setPending(false);
|
||||
}, [entityId, localOn, pending, onUpdate]);
|
||||
|
||||
const handleMode = useCallback(async (mode: string) => {
|
||||
setCurrentMode(mode);
|
||||
await setFanPreset(entityId, mode);
|
||||
onUpdate();
|
||||
}, [entityId, onUpdate]);
|
||||
|
||||
const isOn = localOn;
|
||||
const activeMode = MODES.find((m) => m.id === currentMode) || MODES[0];
|
||||
const accentColor = isOn ? activeMode.color : "rgba(255,255,255,0.3)";
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="glass-card p-6 flex flex-col"
|
||||
style={{
|
||||
minHeight: "140px",
|
||||
...(isOn ? {
|
||||
background: `${activeMode.color}08`,
|
||||
border: `1px solid ${activeMode.color}25`,
|
||||
boxShadow: `0 0 40px ${activeMode.color}10`,
|
||||
} : {})
|
||||
}}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, delay: 0.14 }}
|
||||
>
|
||||
{/* Top row */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-16 h-16 rounded-2xl flex items-center justify-center flex-shrink-0"
|
||||
style={{
|
||||
background: isOn ? `${activeMode.color}20` : "rgba(255,255,255,0.06)",
|
||||
boxShadow: isOn ? `0 0 28px ${activeMode.color}40` : "none",
|
||||
}}>
|
||||
<motion.div animate={isOn ? { rotate: 360 } : { rotate: 0 }}
|
||||
transition={isOn ? { duration: 4, repeat: Infinity, ease: "linear" } : {}}>
|
||||
<Wind size={32} color={isOn ? activeMode.color : "rgba(255,255,255,0.3)"} strokeWidth={1.5} />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>Очиститель</div>
|
||||
<div className="text-sm mt-0.5 font-medium" style={{ color: isOn ? activeMode.color : "var(--text-secondary)" }}>
|
||||
{isOn ? activeMode.label : "Выключен"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toggle — native button */}
|
||||
<button
|
||||
onClick={handleToggle}
|
||||
style={{
|
||||
width: "60px", height: "32px", borderRadius: "16px",
|
||||
background: isOn ? activeMode.color : "rgba(255,255,255,0.12)",
|
||||
boxShadow: isOn ? `0 0 16px ${activeMode.color}60` : "none",
|
||||
border: "none", cursor: "pointer", position: "relative",
|
||||
transition: "background 0.2s ease, box-shadow 0.2s ease",
|
||||
flexShrink: 0,
|
||||
WebkitTapHighlightColor: "transparent",
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
style={{
|
||||
width: "24px", height: "24px", borderRadius: "12px",
|
||||
background: "white", position: "absolute", top: "4px",
|
||||
boxShadow: "0 2px 6px rgba(0,0,0,0.3)",
|
||||
}}
|
||||
animate={{ left: isOn ? "32px" : "4px" }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mode buttons */}
|
||||
<div className="flex gap-3 mt-4">
|
||||
{MODES.map((mode) => {
|
||||
const isActive = currentMode === mode.id && isOn;
|
||||
return (
|
||||
<button
|
||||
key={mode.id}
|
||||
onClick={() => isOn && handleMode(mode.id)}
|
||||
className="flex-1 py-2.5 rounded-2xl text-sm font-semibold"
|
||||
style={isActive ? {
|
||||
background: `${mode.color}22`,
|
||||
border: `1.5px solid ${mode.color}60`,
|
||||
color: mode.color,
|
||||
boxShadow: `0 0 14px ${mode.color}30`,
|
||||
cursor: "pointer",
|
||||
WebkitTapHighlightColor: "transparent",
|
||||
} : {
|
||||
background: "rgba(255,255,255,0.05)",
|
||||
border: "1px solid rgba(255,255,255,0.08)",
|
||||
color: isOn ? "var(--text-secondary)" : "rgba(255,255,255,0.15)",
|
||||
cursor: isOn ? "pointer" : "default",
|
||||
WebkitTapHighlightColor: "transparent",
|
||||
}}
|
||||
>
|
||||
{mode.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Lightbulb } from "lucide-react";
|
||||
import { toggleLight, setLightBrightness } from "@/lib/api";
|
||||
import { getBrightnessPct, pctToBrightness } from "@/lib/ha";
|
||||
|
||||
interface Props {
|
||||
entityId: string;
|
||||
name: string;
|
||||
state: string;
|
||||
brightness?: number;
|
||||
showSlider?: boolean;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
export default function LightCard({ entityId, name, state, brightness, showSlider = false, onUpdate }: Props) {
|
||||
// Optimistic local state — не зависим от HA mock
|
||||
const [localOn, setLocalOn] = useState(state === "on");
|
||||
const brightPct = getBrightnessPct(brightness);
|
||||
const [localBrightness, setLocalBrightness] = useState(brightPct || 70);
|
||||
const [pending, setPending] = useState(false);
|
||||
|
||||
const handleToggle = useCallback(async () => {
|
||||
if (pending) return;
|
||||
const newState = !localOn;
|
||||
setLocalOn(newState); // optimistic
|
||||
setPending(true);
|
||||
try {
|
||||
await toggleLight(entityId, newState);
|
||||
onUpdate();
|
||||
} catch (e) {
|
||||
setLocalOn(!newState); // rollback on real error
|
||||
}
|
||||
setPending(false);
|
||||
}, [entityId, localOn, pending, onUpdate]);
|
||||
|
||||
const handleBrightnessChange = useCallback(async (val: number) => {
|
||||
setLocalBrightness(val);
|
||||
await setLightBrightness(entityId, pctToBrightness(val));
|
||||
onUpdate();
|
||||
}, [entityId, onUpdate]);
|
||||
|
||||
const isOn = localOn;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="glass-card p-6 flex flex-col justify-between"
|
||||
style={{
|
||||
minHeight: "160px",
|
||||
...(isOn ? {
|
||||
background: "rgba(245,158,11,0.07)",
|
||||
border: "1px solid rgba(245,158,11,0.22)",
|
||||
boxShadow: "0 0 40px rgba(245,158,11,0.08), inset 0 1px 0 rgba(245,158,11,0.1)",
|
||||
} : {})
|
||||
}}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35 }}
|
||||
>
|
||||
{/* Top row: icon + toggle */}
|
||||
<div className="flex items-start justify-between">
|
||||
<motion.div
|
||||
className="w-16 h-16 rounded-2xl flex items-center justify-center"
|
||||
style={{
|
||||
background: isOn ? "rgba(245,158,11,0.18)" : "rgba(255,255,255,0.06)",
|
||||
boxShadow: isOn ? "0 0 28px rgba(245,158,11,0.35)" : "none",
|
||||
}}
|
||||
animate={{ scale: isOn ? 1 : 0.97 }}
|
||||
>
|
||||
<Lightbulb size={32} color={isOn ? "#f59e0b" : "rgba(255,255,255,0.35)"} fill={isOn ? "#f59e0b" : "none"} strokeWidth={isOn ? 1.5 : 2} />
|
||||
</motion.div>
|
||||
|
||||
{/* Toggle switch */}
|
||||
<button
|
||||
onClick={handleToggle}
|
||||
style={{
|
||||
width: "60px",
|
||||
height: "32px",
|
||||
borderRadius: "16px",
|
||||
background: isOn ? "#f59e0b" : "rgba(255,255,255,0.12)",
|
||||
boxShadow: isOn ? "0 0 16px rgba(245,158,11,0.5)" : "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
position: "relative",
|
||||
transition: "background 0.2s ease, box-shadow 0.2s ease",
|
||||
flexShrink: 0,
|
||||
WebkitTapHighlightColor: "transparent",
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
style={{
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
borderRadius: "12px",
|
||||
background: "white",
|
||||
position: "absolute",
|
||||
top: "4px",
|
||||
boxShadow: "0 2px 6px rgba(0,0,0,0.3)",
|
||||
}}
|
||||
animate={{ left: isOn ? "32px" : "4px" }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Name + state */}
|
||||
<div className="mt-4">
|
||||
<div className="text-xl font-bold leading-tight" style={{ color: isOn ? "#f59e0b" : "var(--text-primary)" }}>
|
||||
{name}
|
||||
</div>
|
||||
<div className="text-sm mt-1 font-medium" style={{ color: isOn ? "rgba(245,158,11,0.7)" : "var(--text-secondary)" }}>
|
||||
{isOn ? (showSlider ? `Яркость ${localBrightness}%` : "Включён") : "Выключен"}
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{showSlider && isOn && (
|
||||
<motion.div className="mt-4" initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }}>
|
||||
<input
|
||||
type="range" min={5} max={100} value={localBrightness}
|
||||
onChange={(e) => setLocalBrightness(parseInt(e.target.value))}
|
||||
onMouseUp={(e) => handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))}
|
||||
onTouchEnd={(e) => handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))}
|
||||
className="w-full"
|
||||
style={{ accentColor: "#f59e0b" }}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -1,140 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Target } from "lucide-react";
|
||||
|
||||
interface Saving {
|
||||
id: number;
|
||||
name: string;
|
||||
current_amount: number;
|
||||
target_amount: number;
|
||||
color?: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
savings: Saving[];
|
||||
}
|
||||
|
||||
function formatAmount(n: number): string {
|
||||
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}М`;
|
||||
if (n >= 1_000) return `${Math.round(n / 1_000)}К`;
|
||||
return String(n);
|
||||
}
|
||||
|
||||
const COLORS = ["#f59e0b", "#3b82f6", "#10b981", "#8b5cf6", "#f43f5e"];
|
||||
|
||||
export default function SavingsCard({ savings }: Props) {
|
||||
return (
|
||||
<motion.div
|
||||
className="glass-card p-6 h-full flex flex-col"
|
||||
style={{
|
||||
background: "rgba(245,158,11,0.04)",
|
||||
border: "1px solid rgba(245,158,11,0.15)",
|
||||
}}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, delay: 0.21 }}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<div
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{
|
||||
background: "rgba(245,158,11,0.2)",
|
||||
boxShadow: "0 0 16px rgba(245,158,11,0.3)",
|
||||
}}
|
||||
>
|
||||
<Target size={20} color="#f59e0b" />
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="text-base font-bold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
Накопления
|
||||
</div>
|
||||
<div
|
||||
className="text-xs"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
{savings.length} {savings.length === 1 ? "цель" : "целей"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-4">
|
||||
{savings.map((s, i) => {
|
||||
const pct = Math.min(
|
||||
100,
|
||||
Math.round((s.current_amount / s.target_amount) * 100)
|
||||
);
|
||||
const color = s.color || COLORS[i % COLORS.length];
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={s.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 + i * 0.1 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{s.icon && <span className="text-base">{s.icon}</span>}
|
||||
<span
|
||||
className="text-sm font-semibold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
{s.name}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className="text-sm font-black"
|
||||
style={{ color }}
|
||||
>
|
||||
{pct}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Progress bar with glow */}
|
||||
<div className="progress-bar">
|
||||
<motion.div
|
||||
className="h-full rounded-full"
|
||||
style={{
|
||||
background: `linear-gradient(90deg, ${color}80, ${color})`,
|
||||
boxShadow: `0 0 12px ${color}60`,
|
||||
}}
|
||||
initial={{ width: "0%" }}
|
||||
animate={{ width: `${pct}%` }}
|
||||
transition={{
|
||||
duration: 1.2,
|
||||
delay: 0.2 + i * 0.15,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex justify-between text-xs mt-1.5"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
<span>{formatAmount(s.current_amount)} ₽</span>
|
||||
<span>из {formatAmount(s.target_amount)} ₽</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
|
||||
{savings.length === 0 && (
|
||||
<div
|
||||
className="text-center py-6 text-sm"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Нет данных о накоплениях
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -1,185 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { CheckCircle2, Circle, Plus, ListTodo } from "lucide-react";
|
||||
import { createTask, toggleTask } from "@/lib/api";
|
||||
import AddTaskModal from "../AddTaskModal";
|
||||
|
||||
interface Task {
|
||||
id: number;
|
||||
title: string;
|
||||
done: boolean;
|
||||
priority?: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tasks: Task[];
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
export default function TasksCard({ tasks, onUpdate }: Props) {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [localTasks, setLocalTasks] = useState<Task[]>(tasks);
|
||||
|
||||
const handleToggle = useCallback(
|
||||
async (task: Task) => {
|
||||
setLocalTasks((prev) =>
|
||||
prev.map((t) => (t.id === task.id ? { ...t, done: !t.done } : t))
|
||||
);
|
||||
await toggleTask(task.id, !task.done);
|
||||
onUpdate();
|
||||
},
|
||||
[onUpdate]
|
||||
);
|
||||
|
||||
const handleAdd = useCallback(
|
||||
async (title: string) => {
|
||||
const newTask = { id: Date.now(), title, done: false };
|
||||
setLocalTasks((prev) => [newTask, ...prev]);
|
||||
await createTask(title);
|
||||
onUpdate();
|
||||
},
|
||||
[onUpdate]
|
||||
);
|
||||
|
||||
const pending = localTasks.filter((t) => !t.done);
|
||||
const done = localTasks.filter((t) => t.done);
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
className="glass-card p-6 h-full flex flex-col"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, delay: 0.14 }}
|
||||
whileHover={{ scale: 1.005 }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{
|
||||
background: "rgba(139,92,246,0.18)",
|
||||
boxShadow: "0 0 18px rgba(139,92,246,0.3)",
|
||||
}}
|
||||
>
|
||||
<ListTodo size={20} color="#8b5cf6" />
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="text-base font-bold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
Задачи
|
||||
</div>
|
||||
<div
|
||||
className="text-xs"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
{pending.length > 0
|
||||
? `${pending.length} из ${localTasks.length} осталось`
|
||||
: "Всё готово!"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add button */}
|
||||
<motion.button
|
||||
onClick={() => setModalOpen(true)}
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #8b5cf6, #6366f1)",
|
||||
boxShadow: "0 0 18px rgba(139,92,246,0.45)",
|
||||
}}
|
||||
whileTap={{ scale: 0.82 }}
|
||||
>
|
||||
<Plus size={20} color="white" strokeWidth={2.5} />
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{/* Task list */}
|
||||
<div className="flex-1 overflow-y-auto space-y-2 pr-0.5">
|
||||
<AnimatePresence initial={false}>
|
||||
{localTasks.length === 0 && (
|
||||
<motion.div
|
||||
className="flex flex-col items-center justify-center h-full py-8 gap-3"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
>
|
||||
<div className="text-4xl">🎉</div>
|
||||
<div
|
||||
className="text-sm font-medium"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Всё сделано на сегодня!
|
||||
</div>
|
||||
<motion.button
|
||||
onClick={() => setModalOpen(true)}
|
||||
className="mt-2 px-5 py-2.5 rounded-xl text-sm font-semibold"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.2))",
|
||||
border: "1px solid rgba(139,92,246,0.35)",
|
||||
color: "#8b5cf6",
|
||||
}}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
+ Добавить задачу
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{localTasks.map((task) => (
|
||||
<motion.div
|
||||
key={task.id}
|
||||
layout
|
||||
initial={{ opacity: 0, x: -12, height: 0 }}
|
||||
animate={{ opacity: 1, x: 0, height: "auto" }}
|
||||
exit={{ opacity: 0, x: 12, height: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="flex items-center gap-3 px-4 py-3 rounded-2xl cursor-pointer"
|
||||
style={{
|
||||
background: task.done
|
||||
? "rgba(139,92,246,0.05)"
|
||||
: "rgba(255,255,255,0.04)",
|
||||
border: task.done
|
||||
? "1px solid rgba(139,92,246,0.15)"
|
||||
: "1px solid rgba(255,255,255,0.06)",
|
||||
}}
|
||||
onClick={() => handleToggle(task)}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
>
|
||||
{task.done ? (
|
||||
<CheckCircle2 size={20} color="#8b5cf6" strokeWidth={2} />
|
||||
) : (
|
||||
<Circle size={20} color="rgba(255,255,255,0.3)" strokeWidth={1.5} />
|
||||
)}
|
||||
</motion.div>
|
||||
<span
|
||||
className="text-sm font-medium flex-1 leading-snug"
|
||||
style={{
|
||||
color: task.done ? "var(--text-secondary)" : "var(--text-primary)",
|
||||
textDecoration: task.done ? "line-through" : "none",
|
||||
}}
|
||||
>
|
||||
{task.title}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<AddTaskModal
|
||||
open={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
onAdd={handleAdd}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,158 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Thermometer, Plus, Minus } from "lucide-react";
|
||||
import { setClimateTemp } from "@/lib/api";
|
||||
|
||||
interface Props {
|
||||
entityId: string;
|
||||
currentTemp?: number;
|
||||
targetTemp?: number;
|
||||
state: string;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
export default function TemperatureCard({
|
||||
entityId,
|
||||
currentTemp,
|
||||
targetTemp,
|
||||
state,
|
||||
onUpdate,
|
||||
}: Props) {
|
||||
const [target, setTarget] = useState(targetTemp || 22);
|
||||
const isHeating = state === "heat";
|
||||
const isActive = state !== "off";
|
||||
|
||||
const adjust = useCallback(
|
||||
async (delta: number) => {
|
||||
const next = Math.min(30, Math.max(16, target + delta));
|
||||
setTarget(next);
|
||||
await setClimateTemp(entityId, next);
|
||||
onUpdate();
|
||||
},
|
||||
[target, entityId, onUpdate]
|
||||
);
|
||||
|
||||
const accentColor = isHeating ? "#f43f5e" : "#3b82f6";
|
||||
const accentBg = isHeating ? "rgba(244,63,94,0.08)" : "rgba(59,130,246,0.08)";
|
||||
const accentBorder = isHeating ? "rgba(244,63,94,0.2)" : "rgba(59,130,246,0.2)";
|
||||
const accentGlow = isHeating ? "rgba(244,63,94,0.25)" : "rgba(59,130,246,0.2)";
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="glass-card p-6 h-full flex flex-col justify-between"
|
||||
style={
|
||||
isActive
|
||||
? {
|
||||
background: accentBg,
|
||||
border: `1px solid ${accentBorder}`,
|
||||
boxShadow: `0 0 40px ${accentGlow}`,
|
||||
}
|
||||
: {}
|
||||
}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, delay: 0.07 }}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
{/* Icon row */}
|
||||
<div className="flex items-start justify-between">
|
||||
<motion.div
|
||||
className="w-16 h-16 rounded-2xl flex items-center justify-center"
|
||||
style={{
|
||||
background: isActive ? `${accentColor}22` : "rgba(255,255,255,0.06)",
|
||||
boxShadow: isActive ? `0 0 28px ${accentGlow}` : "none",
|
||||
}}
|
||||
>
|
||||
<Thermometer
|
||||
size={32}
|
||||
color={isActive ? accentColor : "rgba(255,255,255,0.35)"}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Status badge */}
|
||||
<div
|
||||
className="px-3 py-1 rounded-full text-xs font-semibold"
|
||||
style={{
|
||||
background: isActive ? `${accentColor}18` : "rgba(255,255,255,0.06)",
|
||||
color: isActive ? accentColor : "var(--text-secondary)",
|
||||
border: `1px solid ${isActive ? accentColor + "40" : "rgba(255,255,255,0.08)"}`,
|
||||
}}
|
||||
>
|
||||
{isHeating ? "Нагрев" : isActive ? "Охлаждение" : "Выкл"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Current temperature — BIG */}
|
||||
<div className="my-4">
|
||||
<div
|
||||
className="font-black leading-none tracking-tight"
|
||||
style={{
|
||||
fontSize: "56px",
|
||||
color: isActive ? accentColor : "var(--text-primary)",
|
||||
textShadow: isActive ? `0 0 40px ${accentColor}60` : "none",
|
||||
}}
|
||||
>
|
||||
{currentTemp?.toFixed(1) ?? "—"}°
|
||||
</div>
|
||||
<div
|
||||
className="text-sm mt-1"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
текущая температура
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Target temperature controls */}
|
||||
<div
|
||||
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.07)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="text-sm font-medium"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Цель
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<motion.button
|
||||
onClick={() => adjust(-0.5)}
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.08)",
|
||||
border: "1px solid rgba(255,255,255,0.1)",
|
||||
}}
|
||||
whileTap={{ scale: 0.82 }}
|
||||
>
|
||||
<Minus size={16} color="var(--text-primary)" />
|
||||
</motion.button>
|
||||
|
||||
<span
|
||||
className="text-2xl font-bold min-w-[56px] text-center"
|
||||
style={{ color: accentColor }}
|
||||
>
|
||||
{target}°
|
||||
</span>
|
||||
|
||||
<motion.button
|
||||
onClick={() => adjust(0.5)}
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{
|
||||
background: `${accentColor}22`,
|
||||
border: `1px solid ${accentColor}50`,
|
||||
}}
|
||||
whileTap={{ scale: 0.82 }}
|
||||
>
|
||||
<Plus size={16} color={accentColor} />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -1,174 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { 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 <= 182) return "🌦️";
|
||||
if (c >= 185 && c <= 200) 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 formatDate(dateStr: string): string {
|
||||
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, compact }: Props) {
|
||||
if (!weather) {
|
||||
return (
|
||||
<motion.div
|
||||
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>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
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-5 h-full flex flex-col"
|
||||
style={{
|
||||
background: "rgba(59,130,246,0.05)",
|
||||
border: "1px solid rgba(59,130,246,0.15)",
|
||||
}}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, delay: 0.21 }}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
{/* Location */}
|
||||
<div
|
||||
className="text-xs font-medium mb-2"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
📍 Санкт-Петербург
|
||||
</div>
|
||||
|
||||
{/* Current weather */}
|
||||
<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: compact ? "36px" : "42px",
|
||||
color: "var(--text-primary)",
|
||||
}}
|
||||
>
|
||||
{weather.temp}°
|
||||
</div>
|
||||
<div
|
||||
className="text-xs mt-0.5"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
{weather.desc}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Forecast */}
|
||||
<div className="flex gap-2 mt-auto">
|
||||
{(weather.forecast || []).slice(0, 3).map((day: any, i: number) => (
|
||||
<motion.div
|
||||
key={day.date}
|
||||
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)",
|
||||
}}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 + i * 0.08 }}
|
||||
>
|
||||
<div
|
||||
className="text-xs mb-0.5 font-medium"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
{i === 0 ? "Сег." : formatDate(day.date)}
|
||||
</div>
|
||||
<div className="text-base mb-0.5">
|
||||
{getWeatherEmoji(day.weatherCode)}
|
||||
</div>
|
||||
<div
|
||||
className="text-xs font-bold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
{day.maxTemp}°/{day.minTemp}°
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import WeatherCard from "./WeatherCard";
|
||||
import SavingsCard from "./SavingsCard";
|
||||
|
||||
interface Props {
|
||||
weather: any;
|
||||
savings: any[];
|
||||
}
|
||||
|
||||
export default function WeatherSavingsCard({ weather, savings }: Props) {
|
||||
const [view, setView] = useState<"weather" | "savings">("weather");
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col gap-2">
|
||||
{/* Toggle pills */}
|
||||
<div
|
||||
className="flex rounded-2xl p-1 gap-1"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.04)",
|
||||
border: "1px solid rgba(255,255,255,0.07)",
|
||||
}}
|
||||
>
|
||||
{[
|
||||
{ id: "weather", label: "🌤 Погода" },
|
||||
{ id: "savings", label: "💰 Цели" },
|
||||
].map((tab) => (
|
||||
<motion.button
|
||||
key={tab.id}
|
||||
onClick={() => setView(tab.id as "weather" | "savings")}
|
||||
className="flex-1 py-1.5 rounded-xl text-xs font-semibold relative"
|
||||
style={{
|
||||
color: view === tab.id ? "var(--text-primary)" : "var(--text-secondary)",
|
||||
}}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
{view === tab.id && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-xl"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.08)",
|
||||
border: "1px solid rgba(255,255,255,0.12)",
|
||||
}}
|
||||
layoutId="wsToggle"
|
||||
transition={{ type: "spring", stiffness: 500, damping: 35 }}
|
||||
/>
|
||||
)}
|
||||
<span className="relative z-10">{tab.label}</span>
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-h-0">
|
||||
<AnimatePresence mode="wait">
|
||||
{view === "weather" ? (
|
||||
<motion.div
|
||||
key="weather"
|
||||
className="h-full"
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<WeatherCard weather={weather} />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="savings"
|
||||
className="h-full"
|
||||
initial={{ opacity: 0, x: 10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<SavingsCard savings={savings} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user