feat(design): FocusCard hero, CountdownCard, data-* palette, swipe, touch-targets
All checks were successful
Deploy / deploy (push) Successful in 3m8s
All checks were successful
Deploy / deploy (push) Successful in 3m8s
Big design pass across Home + tokens + components. — globals.css: new data-* palette (cool/warm/hot/good/info/rose/violet/mood) with theme-aware variants, .grain overlay utility, .num-display typography helper, .hit-zone 44px wrapper, .eyebrow label, .focus-card base, focus-visible outline-offset 3px, space/touch scale vars. — FocusCard.tsx: context engine — пять состояний (morning-outfit, tram-imminent, event-upcoming, countdown, bill-due, night, quiet). Auto-rotates by hour + live data. 96px display numbers, accent-mixed surfaces, grain overlay. — CountdownCard.tsx + /api/countdowns: rotating 8s list, persistent /data/tablet-countdowns.json, full CRUD. Default seeded with Токио. — HomeTab: replaced plain Weather hero with FocusCard, added Row 4 with CountdownCard. Pulls trams + countdowns for the Focus context. — Swipe between tabs: pointer-level detection on <main>, data-swipe-ignore bails out inside modals + note swipe-to-delete + voice overlay. — Touch-target sweep: TopBar HA dot → 44px hit-zone, sensor chip 44px min-height, forecast day buttons 92px min, DeviceCard toggle 60x36, CalendarTab prev/next/close/list all 44x44, NotesTab buttons 44x44, TimerHomeWidget + 44x44, WeatherDayModal chevrons 48x48, close 48. — Hardcoded hex → data-* tokens: TopBar sensors, TransportWidget routes (via color-mix), DeviceCard full rewrite (per-kind accent, glass removed in favor of color-mix surfaces + proper mock-state treatment), NotesTab palette refreshed to match dark theme. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cosmo
@@ -57,7 +57,7 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
<div data-swipe-ignore style={{
|
||||
position: 'fixed', inset: 0,
|
||||
background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)',
|
||||
zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
@@ -79,13 +79,13 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
|
||||
<span style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>
|
||||
Новое событие
|
||||
</span>
|
||||
<button onClick={onClose} style={{
|
||||
width: 32, height: 32, borderRadius: 10,
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
<button onClick={onClose} aria-label="Закрыть" style={{
|
||||
width: 44, height: 44, borderRadius: 12,
|
||||
background: 'var(--surface-2)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: 'var(--text-secondary)',
|
||||
}}>
|
||||
<X size={16} />
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -301,7 +301,7 @@ function EventDetailModal({ event, onClose, onDelete, onUpdate }: {
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
|
||||
<div data-swipe-ignore style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
|
||||
<div style={{
|
||||
background: 'rgba(16,16,30,0.97)', backdropFilter: 'blur(40px)',
|
||||
border: '1px solid rgba(255,255,255,0.07)', borderRadius: 28,
|
||||
@@ -348,13 +348,13 @@ function EventDetailModal({ event, onClose, onDelete, onUpdate }: {
|
||||
Изменить
|
||||
</button>
|
||||
)}
|
||||
<button onClick={onClose} style={{
|
||||
width: 32, height: 32, borderRadius: 10,
|
||||
background: 'rgba(255,255,255,0.06)',
|
||||
<button onClick={onClose} aria-label="Закрыть" style={{
|
||||
width: 44, height: 44, borderRadius: 12,
|
||||
background: 'var(--surface-2)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: 'var(--text-secondary)',
|
||||
}}>
|
||||
<X size={16} />
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -543,7 +543,7 @@ function DayEventsModal({ day, month, year, events, onClose, onSelect }: {
|
||||
const label = date.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })
|
||||
|
||||
return (
|
||||
<div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
|
||||
<div data-swipe-ignore style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
|
||||
<div style={{
|
||||
background: 'rgba(18,18,35,0.95)', backdropFilter: 'blur(40px)',
|
||||
border: '1px solid rgba(255,255,255,0.08)', borderRadius: 24,
|
||||
@@ -701,13 +701,13 @@ export default function CalendarTab() {
|
||||
{/* Header */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<button onClick={prevMonth} style={{ width: 36, height: 36, borderRadius: 12, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)', color: 'var(--text-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<button onClick={prevMonth} aria-label="Предыдущий месяц" style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--surface-2)', border: '1px solid var(--border-subtle)', color: 'var(--text-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<span style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', minWidth: 180, textAlign: 'center' }}>
|
||||
{MONTHS[month]} {year}
|
||||
</span>
|
||||
<button onClick={nextMonth} style={{ width: 36, height: 36, borderRadius: 12, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)', color: 'var(--text-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<button onClick={nextMonth} aria-label="Следующий месяц" style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--surface-2)', border: '1px solid var(--border-subtle)', color: 'var(--text-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
@@ -733,15 +733,19 @@ export default function CalendarTab() {
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
<button onClick={() => setShowUpcoming(v => !v)} style={{
|
||||
width: 36, height: 36, borderRadius: 12,
|
||||
background: showUpcoming ? 'rgba(99,102,241,0.15)' : 'rgba(255,255,255,0.04)',
|
||||
border: showUpcoming ? '1px solid rgba(129,140,248,0.25)' : '1px solid rgba(255,255,255,0.06)',
|
||||
color: showUpcoming ? '#a5b4fc' : 'var(--text-secondary)',
|
||||
<button onClick={() => setShowUpcoming(v => !v)} aria-label="Ближайшие события" style={{
|
||||
width: 44, height: 44, borderRadius: 12,
|
||||
background: showUpcoming
|
||||
? 'color-mix(in srgb, var(--accent) 18%, var(--surface-2))'
|
||||
: 'var(--surface-2)',
|
||||
border: showUpcoming
|
||||
? '1px solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle))'
|
||||
: '1px solid var(--border-subtle)',
|
||||
color: showUpcoming ? 'var(--accent)' : 'var(--text-secondary)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
transition: 'all 0.25s ease',
|
||||
}}>
|
||||
<List size={16} />
|
||||
<List size={18} />
|
||||
</button>
|
||||
<button onClick={() => { setAddDate(today.toISOString().split('T')[0]); setShowAddModal(true) }} style={{
|
||||
display: 'flex', alignItems: 'center', gap: 6,
|
||||
|
||||
198
components/CountdownCard.tsx
Normal file
198
components/CountdownCard.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { Sparkles } from 'lucide-react'
|
||||
|
||||
interface Countdown {
|
||||
id: string
|
||||
label: string
|
||||
date: string
|
||||
emoji?: string
|
||||
color?: string
|
||||
note?: string
|
||||
}
|
||||
|
||||
interface Computed {
|
||||
id: string
|
||||
label: string
|
||||
emoji?: string
|
||||
days: number
|
||||
accent: string
|
||||
dateStr: string
|
||||
}
|
||||
|
||||
const ROTATE_MS = 8_000
|
||||
|
||||
function resolveColor(c: Countdown): string {
|
||||
if (!c.color) return 'var(--data-violet)'
|
||||
if (c.color.startsWith('#')) return c.color
|
||||
// токен вида "data-rose" → "var(--data-rose)"
|
||||
return `var(--${c.color})`
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
try {
|
||||
return new Date(iso + 'T00:00:00').toLocaleDateString('ru-RU', {
|
||||
day: 'numeric', month: 'long',
|
||||
})
|
||||
} catch {
|
||||
return iso
|
||||
}
|
||||
}
|
||||
|
||||
function daysFromNow(iso: string): number {
|
||||
const target = new Date(iso + 'T00:00:00').getTime()
|
||||
const today = new Date()
|
||||
today.setHours(0, 0, 0, 0)
|
||||
return Math.ceil((target - today.getTime()) / 86_400_000)
|
||||
}
|
||||
|
||||
function pluralizeDays(n: number): string {
|
||||
const a = Math.abs(n)
|
||||
if (a % 10 === 1 && a % 100 !== 11) return 'день'
|
||||
if ([2, 3, 4].includes(a % 10) && ![12, 13, 14].includes(a % 100)) return 'дня'
|
||||
return 'дней'
|
||||
}
|
||||
|
||||
export default function CountdownCard() {
|
||||
const [items, setItems] = useState<Computed[]>([])
|
||||
const [idx, setIdx] = useState(0)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
fetch('/api/countdowns')
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
if (cancelled) return
|
||||
const list: Countdown[] = d.countdowns || []
|
||||
const computed = list
|
||||
.map(c => ({
|
||||
id: c.id,
|
||||
label: c.label,
|
||||
emoji: c.emoji,
|
||||
days: daysFromNow(c.date),
|
||||
accent: resolveColor(c),
|
||||
dateStr: formatDate(c.date),
|
||||
}))
|
||||
.filter(c => c.days >= 0) // прошедшие скрываем
|
||||
.sort((a, b) => a.days - b.days)
|
||||
setItems(computed)
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => { if (!cancelled) setLoading(false) })
|
||||
return () => { cancelled = true }
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (items.length <= 1) return
|
||||
const t = setInterval(() => setIdx(i => (i + 1) % items.length), ROTATE_MS)
|
||||
return () => clearInterval(t)
|
||||
}, [items.length])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="card" style={{
|
||||
padding: '16px 18px', minHeight: 128,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: 'var(--text-tertiary)', fontSize: 12,
|
||||
}}>
|
||||
…
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<div className="card" style={{
|
||||
padding: '18px 20px', minHeight: 128,
|
||||
display: 'flex', flexDirection: 'column', gap: 10,
|
||||
color: 'var(--text-tertiary)',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Sparkles size={14} />
|
||||
<span className="eyebrow">Отсчёт</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 13, lineHeight: 1.5 }}>
|
||||
Добавь в настройках — отпуск, др, дедлайн.
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const current = items[Math.min(idx, items.length - 1)]
|
||||
const imminent = current.days <= 3
|
||||
const soon = current.days <= 7
|
||||
|
||||
return (
|
||||
<div
|
||||
className="card grain"
|
||||
style={{
|
||||
padding: '18px 20px',
|
||||
minHeight: 128,
|
||||
display: 'flex', flexDirection: 'column', gap: 10,
|
||||
position: 'relative', overflow: 'hidden',
|
||||
background: `linear-gradient(135deg, color-mix(in srgb, ${current.accent} 12%, var(--surface-1)), var(--surface-1))`,
|
||||
border: `1px solid color-mix(in srgb, ${current.accent} 22%, var(--border-subtle))`,
|
||||
transition: 'background 0.6s ease, border-color 0.6s ease',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Sparkles size={14} color={current.accent} />
|
||||
<span className="eyebrow" style={{ color: current.accent }}>Отсчёт</span>
|
||||
{items.length > 1 && (
|
||||
<div style={{ marginLeft: 'auto', display: 'flex', gap: 4 }}>
|
||||
{items.map((_, i) => (
|
||||
<div key={i} style={{
|
||||
width: i === idx ? 14 : 5, height: 5, borderRadius: 3,
|
||||
background: i === idx ? current.accent : 'var(--surface-3)',
|
||||
transition: 'all 0.4s ease',
|
||||
}} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={current.id}
|
||||
initial={{ opacity: 0, y: 4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -4 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
style={{ display: 'flex', flexDirection: 'column', gap: 4 }}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
|
||||
<div className="num-display" style={{
|
||||
fontSize: current.days === 0 ? 36 : 48,
|
||||
color: imminent ? current.accent : 'var(--text-primary)',
|
||||
letterSpacing: '-0.04em',
|
||||
}}>
|
||||
{current.days === 0 ? 'сегодня' : current.days}
|
||||
</div>
|
||||
{current.days > 0 && (
|
||||
<div style={{
|
||||
fontSize: 15, color: 'var(--text-secondary)', fontWeight: 600,
|
||||
}}>
|
||||
{pluralizeDays(current.days)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: 14, fontWeight: 700, color: 'var(--text-primary)',
|
||||
display: 'flex', alignItems: 'center', gap: 8,
|
||||
}}>
|
||||
{current.emoji && <span style={{ fontSize: 16 }}>{current.emoji}</span>}
|
||||
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{current.label}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>
|
||||
{current.dateStr}
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -14,35 +14,44 @@ interface DeviceCardProps {
|
||||
extraInfo?: string
|
||||
}
|
||||
|
||||
function getDeviceIcon(id: string, isOn: boolean) {
|
||||
const color = isOn ? '#a5b4fc' : 'rgba(255,255,255,0.35)'
|
||||
const size = 24
|
||||
if (id.includes('air_purifier')) return <Fan size={size} color={color} />
|
||||
if (id.includes('light')) return <Lightbulb size={size} color={isOn ? '#fbbf24' : color} />
|
||||
if (id.includes('tv')) return <Tv size={size} color={color} />
|
||||
if (id.includes('ac')) return <Snowflake size={size} color={isOn ? '#22d3ee' : color} />
|
||||
return <Power size={size} color={color} />
|
||||
type DeviceKind = 'air_purifier' | 'light' | 'tv' | 'ac' | 'default'
|
||||
|
||||
function getDeviceKind(id: string): DeviceKind {
|
||||
if (id.includes('air_purifier')) return 'air_purifier'
|
||||
if (id.includes('light')) return 'light'
|
||||
if (id.includes('tv')) return 'tv'
|
||||
if (id.includes('ac')) return 'ac'
|
||||
return 'default'
|
||||
}
|
||||
|
||||
function getDeviceGradient(id: string): string {
|
||||
if (id.includes('air_purifier')) return 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.12))'
|
||||
if (id.includes('light')) return 'linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.1))'
|
||||
if (id.includes('tv')) return 'linear-gradient(135deg, rgba(59,130,246,0.18), rgba(99,102,241,0.1))'
|
||||
if (id.includes('ac')) return 'linear-gradient(135deg, rgba(34,211,238,0.18), rgba(6,182,212,0.1))'
|
||||
return 'linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.08))'
|
||||
// Каждый тип устройства — свой data-token (а не хардкод hex)
|
||||
const DEVICE_ACCENT: Record<DeviceKind, string> = {
|
||||
air_purifier: 'var(--data-violet)',
|
||||
light: 'var(--data-warm)',
|
||||
tv: 'var(--data-info)',
|
||||
ac: 'var(--data-cool)',
|
||||
default: 'var(--accent)',
|
||||
}
|
||||
|
||||
function getDeviceBorder(id: string): string {
|
||||
if (id.includes('air_purifier')) return 'rgba(129,140,248,0.25)'
|
||||
if (id.includes('light')) return 'rgba(251,191,36,0.25)'
|
||||
if (id.includes('tv')) return 'rgba(99,102,241,0.25)'
|
||||
if (id.includes('ac')) return 'rgba(34,211,238,0.25)'
|
||||
return 'rgba(129,140,248,0.2)'
|
||||
function getDeviceIcon(kind: DeviceKind, isOn: boolean) {
|
||||
const color = isOn ? DEVICE_ACCENT[kind] : 'var(--text-tertiary)'
|
||||
const size = 26
|
||||
const strokeWidth = 1.9
|
||||
switch (kind) {
|
||||
case 'air_purifier': return <Fan size={size} color={color} strokeWidth={strokeWidth} />
|
||||
case 'light': return <Lightbulb size={size} color={color} strokeWidth={strokeWidth} />
|
||||
case 'tv': return <Tv size={size} color={color} strokeWidth={strokeWidth} />
|
||||
case 'ac': return <Snowflake size={size} color={color} strokeWidth={strokeWidth} />
|
||||
default: return <Power size={size} color={color} strokeWidth={strokeWidth} />
|
||||
}
|
||||
}
|
||||
|
||||
export default function DeviceCard({
|
||||
id, name, icon, entityId, domain, initialState, isMock = false, extraInfo,
|
||||
}: DeviceCardProps) {
|
||||
const kind = getDeviceKind(id)
|
||||
const accent = DEVICE_ACCENT[kind]
|
||||
|
||||
const [isOn, setIsOn] = useState(initialState)
|
||||
const [synced, setSynced] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
@@ -78,33 +87,36 @@ export default function DeviceCard({
|
||||
}
|
||||
}
|
||||
|
||||
const activeBg = `color-mix(in srgb, ${accent} 14%, var(--surface-1))`
|
||||
const activeBorder = `color-mix(in srgb, ${accent} 35%, var(--border-subtle))`
|
||||
const activeGlow = `color-mix(in srgb, ${accent} 22%, transparent)`
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
background: isOn ? getDeviceGradient(id) : 'rgba(255,255,255,0.03)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
WebkitBackdropFilter: 'blur(20px)',
|
||||
border: isOn ? `1px solid ${getDeviceBorder(id)}` : '1px solid rgba(255,255,255,0.06)',
|
||||
background: isOn ? activeBg : 'var(--surface-1)',
|
||||
border: `1px solid ${isOn ? activeBorder : 'var(--border-subtle)'}`,
|
||||
borderRadius: 22,
|
||||
padding: '20px 18px 18px',
|
||||
minHeight: 150,
|
||||
minHeight: 160,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
transition: 'all 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
boxShadow: isOn ? '0 8px 32px rgba(99,102,241,0.1)' : '0 2px 8px rgba(0,0,0,0.1)',
|
||||
boxShadow: isOn ? `0 8px 32px -12px ${activeGlow}` : 'var(--shadow-sm)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
opacity: isMock ? 0.88 : 1,
|
||||
}}>
|
||||
{/* Subtle glow effect when on */}
|
||||
{/* Subtle accent glow when on */}
|
||||
{isOn && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: -30,
|
||||
right: -30,
|
||||
width: 100,
|
||||
height: 100,
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: '50%',
|
||||
background: 'radial-gradient(circle, rgba(129,140,248,0.15) 0%, transparent 70%)',
|
||||
background: `radial-gradient(circle, color-mix(in srgb, ${accent} 25%, transparent) 0%, transparent 70%)`,
|
||||
pointerEvents: 'none',
|
||||
}} />
|
||||
)}
|
||||
@@ -112,36 +124,40 @@ export default function DeviceCard({
|
||||
{/* Top: icon + toggle */}
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', position: 'relative', zIndex: 1 }}>
|
||||
<div
|
||||
className={isOn ? (id.includes('air_purifier') ? 'fan-spinning' : id.includes('light') ? 'light-on-pulse' : 'device-active-breathe') : ''}
|
||||
className={isOn ? (kind === 'air_purifier' ? 'fan-spinning' : kind === 'light' ? 'light-on-pulse' : 'device-active-breathe') : ''}
|
||||
style={{
|
||||
width: 48, height: 48, borderRadius: 16,
|
||||
background: isOn ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.05)',
|
||||
width: 52, height: 52, borderRadius: 16,
|
||||
background: isOn
|
||||
? `color-mix(in srgb, ${accent} 20%, var(--surface-2))`
|
||||
: 'var(--surface-2)',
|
||||
border: `1px solid ${isOn ? `color-mix(in srgb, ${accent} 35%, transparent)` : 'var(--border-subtle)'}`,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
transition: 'all 0.3s ease',
|
||||
boxShadow: isOn ? '0 4px 16px rgba(0,0,0,0.1)' : 'none',
|
||||
}}>
|
||||
{getDeviceIcon(id, isOn)}
|
||||
{getDeviceIcon(kind, isOn)}
|
||||
</div>
|
||||
|
||||
{/* Toggle switch — 60x36, touch-friendly */}
|
||||
<button
|
||||
onClick={toggle}
|
||||
disabled={loading}
|
||||
disabled={loading || isMock}
|
||||
aria-label={isOn ? `Выключить ${name}` : `Включить ${name}`}
|
||||
style={{
|
||||
width: 54, height: 30, borderRadius: 15,
|
||||
width: 60, height: 36, borderRadius: 18,
|
||||
background: isOn
|
||||
? 'linear-gradient(90deg, #6366f1, #8b5cf6)'
|
||||
: 'rgba(255,255,255,0.08)',
|
||||
position: 'relative', border: 'none', cursor: 'pointer',
|
||||
? `linear-gradient(90deg, ${accent}, color-mix(in srgb, ${accent} 70%, black))`
|
||||
: 'var(--off-color)',
|
||||
position: 'relative', border: 'none', cursor: isMock ? 'not-allowed' : 'pointer',
|
||||
flexShrink: 0,
|
||||
transition: 'all 0.3s ease',
|
||||
opacity: loading ? 0.6 : 1,
|
||||
boxShadow: isOn ? '0 0 16px rgba(99,102,241,0.3)' : 'none',
|
||||
boxShadow: isOn ? `0 0 18px -2px ${activeGlow}` : 'none',
|
||||
}}
|
||||
>
|
||||
<span style={{
|
||||
position: 'absolute', top: 4,
|
||||
left: isOn ? 28 : 4,
|
||||
width: 22, height: 22, borderRadius: '50%',
|
||||
width: 28, height: 28, borderRadius: '50%',
|
||||
background: '#fff',
|
||||
boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
|
||||
transition: 'left 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
@@ -152,14 +168,14 @@ export default function DeviceCard({
|
||||
|
||||
{/* Bottom: name + status */}
|
||||
<div style={{ position: 'relative', zIndex: 1 }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3 }}>
|
||||
<div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.3 }}>
|
||||
{name}
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: 12,
|
||||
color: isOn ? '#a5b4fc' : 'var(--text-secondary)',
|
||||
color: isOn ? accent : 'var(--text-secondary)',
|
||||
marginTop: 4,
|
||||
fontWeight: 500,
|
||||
fontWeight: 600,
|
||||
}}>
|
||||
{isOn ? 'Включён' : 'Выключен'}
|
||||
{extraInfo && isOn ? ` · ${extraInfo}` : ''}
|
||||
@@ -168,8 +184,10 @@ export default function DeviceCard({
|
||||
<div style={{
|
||||
fontSize: 10,
|
||||
color: 'var(--text-tertiary)',
|
||||
marginTop: 2,
|
||||
fontStyle: 'italic',
|
||||
marginTop: 3,
|
||||
fontWeight: 600,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.08em',
|
||||
}}>demo</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
426
components/FocusCard.tsx
Normal file
426
components/FocusCard.tsx
Normal file
@@ -0,0 +1,426 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
Umbrella, Wind, ThermometerSun, TramFront, Calendar as CalendarIcon,
|
||||
Receipt, Sparkles, Moon, Sun,
|
||||
} from 'lucide-react'
|
||||
|
||||
// ——————————————————————————————
|
||||
// Types
|
||||
// ——————————————————————————————
|
||||
|
||||
export interface FocusWeather {
|
||||
temp: string
|
||||
desc: string
|
||||
feelsLike?: string
|
||||
}
|
||||
|
||||
export interface FocusTram {
|
||||
route: string
|
||||
minutes: number
|
||||
direction: string
|
||||
}
|
||||
|
||||
export interface FocusEvent {
|
||||
id: string
|
||||
title: string
|
||||
start: string
|
||||
allDay?: boolean
|
||||
ownerName?: string
|
||||
color?: string
|
||||
}
|
||||
|
||||
export interface FocusCountdown {
|
||||
label: string
|
||||
date: string // ISO YYYY-MM-DD
|
||||
}
|
||||
|
||||
export interface FocusBill {
|
||||
title: string
|
||||
amount: string
|
||||
daysLeft: number
|
||||
}
|
||||
|
||||
interface Props {
|
||||
weather: FocusWeather | null
|
||||
tramNext?: FocusTram | null
|
||||
nextEvent?: FocusEvent | null
|
||||
countdowns?: FocusCountdown[]
|
||||
bills?: FocusBill[]
|
||||
}
|
||||
|
||||
// ——————————————————————————————
|
||||
// Focus state machine
|
||||
// ——————————————————————————————
|
||||
|
||||
type FocusKind =
|
||||
| { kind: 'morning-outfit'; tempNow: string; feels: string; advice: string; Icon: any; accent: string }
|
||||
| { kind: 'tram-imminent'; route: string; minutes: number; direction: string }
|
||||
| { kind: 'event-upcoming'; title: string; inMinutes: number; owner?: string; color?: string }
|
||||
| { kind: 'countdown'; label: string; days: number }
|
||||
| { kind: 'bill-due'; title: string; amount: string; daysLeft: number }
|
||||
| { kind: 'night'; hour: number }
|
||||
| { kind: 'quiet'; greeting: string }
|
||||
|
||||
function pickFocus(p: Props, hour: number): FocusKind {
|
||||
// 1. Bill due today / tomorrow — всегда приоритет
|
||||
const bill = p.bills?.find(b => b.daysLeft <= 1)
|
||||
if (bill) return { kind: 'bill-due', ...bill }
|
||||
|
||||
// 2. Ближайшее событие ≤30 минут
|
||||
if (p.nextEvent && !p.nextEvent.allDay) {
|
||||
const start = new Date(p.nextEvent.start).getTime()
|
||||
const inMin = Math.round((start - Date.now()) / 60_000)
|
||||
if (inMin >= -5 && inMin <= 30) {
|
||||
return {
|
||||
kind: 'event-upcoming',
|
||||
title: p.nextEvent.title,
|
||||
inMinutes: inMin,
|
||||
owner: p.nextEvent.ownerName,
|
||||
color: p.nextEvent.color,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Трамвай в рабочий час, ≤3 мин
|
||||
const rushHour = (hour >= 7 && hour <= 10) || (hour >= 17 && hour <= 20)
|
||||
if (rushHour && p.tramNext && p.tramNext.minutes >= 0 && p.tramNext.minutes <= 3) {
|
||||
return { kind: 'tram-imminent', ...p.tramNext }
|
||||
}
|
||||
|
||||
// 4. Утро (7-10) → одевалка
|
||||
if (hour >= 7 && hour < 11 && p.weather) {
|
||||
const t = parseInt(p.weather.temp, 10)
|
||||
const descLower = p.weather.desc?.toLowerCase() || ''
|
||||
const rain = /дожд|ливен|грозa|морос/.test(descLower)
|
||||
const snow = /снег|метел/.test(descLower)
|
||||
const advice =
|
||||
rain ? 'возьми зонт' :
|
||||
snow ? 'шапка и зимняя обувь' :
|
||||
t <= -10 ? 'пуховик, шапка, перчатки' :
|
||||
t < 0 ? 'шапка и перчатки' :
|
||||
t < 7 ? 'тёплая куртка' :
|
||||
t < 15 ? 'лёгкая куртка' :
|
||||
t < 22 ? 'свитер или рубашка' : 'футболка'
|
||||
const Icon = rain ? Umbrella : snow ? Wind : t < 0 ? Wind : ThermometerSun
|
||||
const accent =
|
||||
rain ? 'var(--data-cool)' :
|
||||
snow ? 'var(--data-info)' :
|
||||
t < 0 ? 'var(--data-info)' :
|
||||
t >= 22 ? 'var(--data-warm)' : 'var(--data-warm)'
|
||||
return {
|
||||
kind: 'morning-outfit',
|
||||
tempNow: p.weather.temp,
|
||||
feels: p.weather.feelsLike || '',
|
||||
advice, Icon, accent,
|
||||
}
|
||||
}
|
||||
|
||||
// 5. Ближайший countdown (≤14 дней)
|
||||
const cd = (p.countdowns || [])
|
||||
.map(c => {
|
||||
const target = new Date(c.date + 'T00:00:00').getTime()
|
||||
const days = Math.ceil((target - Date.now()) / 86_400_000)
|
||||
return { label: c.label, days }
|
||||
})
|
||||
.filter(c => c.days >= 0 && c.days <= 14)
|
||||
.sort((a, b) => a.days - b.days)[0]
|
||||
if (cd) return { kind: 'countdown', ...cd }
|
||||
|
||||
// 6. Ночь
|
||||
if (hour >= 22 || hour < 5) return { kind: 'night', hour }
|
||||
|
||||
// 7. Тихо — приветствие
|
||||
const greeting =
|
||||
hour >= 5 && hour < 12 ? 'Доброе утро' :
|
||||
hour >= 12 && hour < 17 ? 'Добрый день' :
|
||||
hour >= 17 && hour < 22 ? 'Добрый вечер' : 'Доброй ночи'
|
||||
return { kind: 'quiet', greeting }
|
||||
}
|
||||
|
||||
// ——————————————————————————————
|
||||
// Presentations
|
||||
// ——————————————————————————————
|
||||
|
||||
function Eyebrow({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div style={{
|
||||
fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
|
||||
textTransform: 'uppercase', color: 'var(--text-tertiary)',
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FocusShell({
|
||||
eyebrow,
|
||||
accent,
|
||||
children,
|
||||
}: {
|
||||
eyebrow: React.ReactNode
|
||||
accent: string
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="focus-card grain"
|
||||
style={{
|
||||
padding: '26px 28px',
|
||||
display: 'flex', flexDirection: 'column',
|
||||
minHeight: 220,
|
||||
background: `linear-gradient(180deg, color-mix(in srgb, ${accent} 10%, var(--surface-1)), var(--surface-1))`,
|
||||
border: `1px solid color-mix(in srgb, ${accent} 22%, var(--border-subtle))`,
|
||||
}}
|
||||
>
|
||||
{/* Top eyebrow */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
|
||||
{eyebrow}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ——————————————————————————————
|
||||
// Individual states
|
||||
// ——————————————————————————————
|
||||
|
||||
function MorningOutfit(f: Extract<FocusKind, { kind: 'morning-outfit' }>) {
|
||||
return (
|
||||
<FocusShell
|
||||
accent={f.accent}
|
||||
eyebrow={<>
|
||||
<f.Icon size={16} color={f.accent} strokeWidth={2} />
|
||||
<Eyebrow>Собираясь на улицу</Eyebrow>
|
||||
</>}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 16 }}>
|
||||
<div className="num-display" style={{ fontSize: 96, color: 'var(--text-primary)' }}>
|
||||
{f.tempNow}°
|
||||
</div>
|
||||
{f.feels && (
|
||||
<div style={{ fontSize: 15, color: 'var(--text-secondary)' }}>
|
||||
ощущается <span className="num" style={{ fontWeight: 700, color: 'var(--text-primary)' }}>{f.feels}°</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: 22, fontWeight: 700, color: 'var(--text-primary)',
|
||||
letterSpacing: '-0.3px', lineHeight: 1.3,
|
||||
}}>
|
||||
{f.advice}
|
||||
</div>
|
||||
</FocusShell>
|
||||
)
|
||||
}
|
||||
|
||||
function TramImminent(f: Extract<FocusKind, { kind: 'tram-imminent' }>) {
|
||||
const accent = 'var(--data-hot)'
|
||||
return (
|
||||
<FocusShell
|
||||
accent={accent}
|
||||
eyebrow={<>
|
||||
<TramFront size={16} color={accent} strokeWidth={2} />
|
||||
<Eyebrow>Трамвай подходит</Eyebrow>
|
||||
</>}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 14 }}>
|
||||
<div className="num-display" style={{ fontSize: 96, color: accent }}>
|
||||
{f.minutes <= 0 ? 'сейчас' : f.minutes}
|
||||
</div>
|
||||
{f.minutes > 0 && (
|
||||
<div style={{ fontSize: 24, fontWeight: 600, color: 'var(--text-secondary)' }}>мин</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>
|
||||
Маршрут {f.route} · {f.direction}
|
||||
</div>
|
||||
</FocusShell>
|
||||
)
|
||||
}
|
||||
|
||||
function EventUpcoming(f: Extract<FocusKind, { kind: 'event-upcoming' }>) {
|
||||
const accent = f.color || 'var(--accent)'
|
||||
const timeWord = f.inMinutes < 0 ? 'сейчас' : f.inMinutes === 0 ? 'сейчас' : `через ${f.inMinutes}м`
|
||||
return (
|
||||
<FocusShell
|
||||
accent={accent}
|
||||
eyebrow={<>
|
||||
<CalendarIcon size={16} color={accent} strokeWidth={2} />
|
||||
<Eyebrow>{timeWord}</Eyebrow>
|
||||
</>}
|
||||
>
|
||||
<div style={{
|
||||
fontSize: 32, fontWeight: 800, color: 'var(--text-primary)',
|
||||
letterSpacing: '-0.8px', lineHeight: 1.15, marginBottom: 14,
|
||||
}}>
|
||||
{f.title}
|
||||
</div>
|
||||
{f.owner && (
|
||||
<div style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 8,
|
||||
padding: '6px 12px', borderRadius: 14,
|
||||
background: `color-mix(in srgb, ${accent} 16%, var(--surface-2))`,
|
||||
border: `1px solid color-mix(in srgb, ${accent} 28%, var(--border-subtle))`,
|
||||
color: accent, fontSize: 13, fontWeight: 700, alignSelf: 'flex-start',
|
||||
}}>
|
||||
{f.owner}
|
||||
</div>
|
||||
)}
|
||||
</FocusShell>
|
||||
)
|
||||
}
|
||||
|
||||
function CountdownView(f: Extract<FocusKind, { kind: 'countdown' }>) {
|
||||
const accent = f.days <= 3 ? 'var(--data-hot)' : f.days <= 7 ? 'var(--data-warm)' : 'var(--data-violet)'
|
||||
const word =
|
||||
f.days === 0 ? 'сегодня' :
|
||||
f.days === 1 ? 'завтра' :
|
||||
f.days < 5 ? `${f.days} дня` : `${f.days} дней`
|
||||
return (
|
||||
<FocusShell
|
||||
accent={accent}
|
||||
eyebrow={<>
|
||||
<Sparkles size={16} color={accent} strokeWidth={2} />
|
||||
<Eyebrow>До события</Eyebrow>
|
||||
</>}
|
||||
>
|
||||
<div className="num-display" style={{
|
||||
fontSize: f.days === 0 ? 56 : 96,
|
||||
color: 'var(--text-primary)', marginBottom: 12,
|
||||
}}>
|
||||
{f.days === 0 ? 'сегодня' : f.days}
|
||||
{f.days > 0 && <span style={{ fontSize: 24, fontWeight: 600, color: 'var(--text-secondary)', marginLeft: 10, letterSpacing: 0 }}>
|
||||
{f.days < 5 ? 'дня' : 'дней'}
|
||||
</span>}
|
||||
</div>
|
||||
<div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)' }}>
|
||||
{f.label}
|
||||
</div>
|
||||
</FocusShell>
|
||||
)
|
||||
}
|
||||
|
||||
function BillDue(f: Extract<FocusKind, { kind: 'bill-due' }>) {
|
||||
const accent = 'var(--data-danger)'
|
||||
const word = f.daysLeft === 0 ? 'сегодня' : f.daysLeft === 1 ? 'завтра' : `через ${f.daysLeft}д`
|
||||
return (
|
||||
<FocusShell
|
||||
accent={accent}
|
||||
eyebrow={<>
|
||||
<Receipt size={16} color={accent} strokeWidth={2} />
|
||||
<Eyebrow>К оплате {word}</Eyebrow>
|
||||
</>}
|
||||
>
|
||||
<div className="num-display" style={{
|
||||
fontSize: 72, color: accent, marginBottom: 8, letterSpacing: '-0.03em',
|
||||
}}>
|
||||
{f.amount}
|
||||
</div>
|
||||
<div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)' }}>
|
||||
{f.title}
|
||||
</div>
|
||||
</FocusShell>
|
||||
)
|
||||
}
|
||||
|
||||
function NightView() {
|
||||
const accent = 'var(--data-violet)'
|
||||
return (
|
||||
<FocusShell
|
||||
accent={accent}
|
||||
eyebrow={<>
|
||||
<Moon size={16} color={accent} strokeWidth={2} />
|
||||
<Eyebrow>Тихое время</Eyebrow>
|
||||
</>}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', flex: 1, gap: 8 }}>
|
||||
<div style={{ fontSize: 28, fontWeight: 800, color: 'var(--text-primary)', letterSpacing: '-0.5px' }}>
|
||||
Спокойной ночи
|
||||
</div>
|
||||
<div style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
|
||||
Дом в режиме ожидания. Касание — разблокировать.
|
||||
</div>
|
||||
</div>
|
||||
</FocusShell>
|
||||
)
|
||||
}
|
||||
|
||||
function QuietView({ greeting, weather }: { greeting: string; weather: FocusWeather | null }) {
|
||||
const accent = 'var(--accent)'
|
||||
const [now, setNow] = useState(() => new Date())
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => setNow(new Date()), 30_000)
|
||||
return () => clearInterval(t)
|
||||
}, [])
|
||||
return (
|
||||
<FocusShell
|
||||
accent={accent}
|
||||
eyebrow={<>
|
||||
<Sun size={16} color={accent} strokeWidth={2} />
|
||||
<Eyebrow>{now.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })}</Eyebrow>
|
||||
</>}
|
||||
>
|
||||
<div style={{ fontSize: 32, fontWeight: 800, color: 'var(--text-primary)', letterSpacing: '-0.5px', marginBottom: 12 }}>
|
||||
{greeting}
|
||||
</div>
|
||||
{weather && (
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
|
||||
<div className="num-display" style={{ fontSize: 56, color: 'var(--text-primary)' }}>
|
||||
{weather.temp}°
|
||||
</div>
|
||||
<div style={{ fontSize: 15, color: 'var(--text-secondary)', fontWeight: 500 }}>
|
||||
{weather.desc}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</FocusShell>
|
||||
)
|
||||
}
|
||||
|
||||
// ——————————————————————————————
|
||||
// Root
|
||||
// ——————————————————————————————
|
||||
|
||||
export default function FocusCard(props: Props) {
|
||||
const [hour, setHour] = useState(() => new Date().getHours())
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => setHour(new Date().getHours()), 60_000)
|
||||
return () => clearInterval(t)
|
||||
}, [])
|
||||
|
||||
const focus = useMemo(() => pickFocus(props, hour), [props, hour])
|
||||
|
||||
const key = focus.kind + (
|
||||
focus.kind === 'morning-outfit' ? focus.advice :
|
||||
focus.kind === 'tram-imminent' ? `${focus.route}-${focus.minutes}` :
|
||||
focus.kind === 'event-upcoming' ? focus.title :
|
||||
focus.kind === 'countdown' ? focus.label :
|
||||
focus.kind === 'bill-due' ? focus.title :
|
||||
focus.kind === 'quiet' ? focus.greeting : ''
|
||||
)
|
||||
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={key}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -8 }}
|
||||
transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}
|
||||
style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
|
||||
>
|
||||
{focus.kind === 'morning-outfit' && <MorningOutfit {...focus} />}
|
||||
{focus.kind === 'tram-imminent' && <TramImminent {...focus} />}
|
||||
{focus.kind === 'event-upcoming' && <EventUpcoming {...focus} />}
|
||||
{focus.kind === 'countdown' && <CountdownView {...focus} />}
|
||||
{focus.kind === 'bill-due' && <BillDue {...focus} />}
|
||||
{focus.kind === 'night' && <NightView />}
|
||||
{focus.kind === 'quiet' && <QuietView greeting={focus.greeting} weather={props.weather} />}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
@@ -21,7 +21,11 @@ interface Note {
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
const NOTE_COLORS = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#3b82f6', '#8b5cf6']
|
||||
// NOTE: заметки сохраняют свой цвет на всё время жизни —
|
||||
// храним hex, но генерим их из theme-aware CSS-переменных через computed style.
|
||||
// Для совместимости с существующими заметками оставляем hex-палитру,
|
||||
// но подобранную под новые data-токены (dark theme).
|
||||
const NOTE_COLORS = ['#818cf8', '#f472b6', '#34d399', '#fbbf24', '#38bdf8', '#a78bfa']
|
||||
|
||||
export default function NotesTab() {
|
||||
const [notes, setNotes] = useState<Note[]>([])
|
||||
@@ -104,14 +108,21 @@ export default function NotesTab() {
|
||||
<div style={{ width: 260, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 10, overflowY: 'auto' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
|
||||
<h2 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>Заметки</h2>
|
||||
<button onClick={() => setShowCreate(v => !v)} style={{
|
||||
width: 36, height: 36, borderRadius: 12,
|
||||
background: showCreate ? 'rgba(255,255,255,0.06)' : 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15))',
|
||||
border: showCreate ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(129,140,248,0.25)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: showCreate ? 'var(--text-secondary)' : '#a5b4fc',
|
||||
}}>
|
||||
{showCreate ? <X size={16} /> : <Plus size={16} />}
|
||||
<button
|
||||
onClick={() => setShowCreate(v => !v)}
|
||||
aria-label={showCreate ? 'Отмена' : 'Создать заметку'}
|
||||
style={{
|
||||
width: 44, height: 44, borderRadius: 14,
|
||||
background: showCreate
|
||||
? 'var(--surface-2)'
|
||||
: 'color-mix(in srgb, var(--accent) 16%, var(--surface-2))',
|
||||
border: showCreate
|
||||
? '1px solid var(--border-subtle)'
|
||||
: '1px solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle))',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: showCreate ? 'var(--text-secondary)' : 'var(--accent)',
|
||||
}}>
|
||||
{showCreate ? <X size={18} /> : <Plus size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -148,6 +159,7 @@ export default function NotesTab() {
|
||||
<motion.div
|
||||
key={note.id}
|
||||
layout
|
||||
data-swipe-ignore
|
||||
style={{ position: 'relative', borderRadius: 16, overflow: 'hidden' }}
|
||||
>
|
||||
{/* Delete reveal layer */}
|
||||
@@ -260,13 +272,16 @@ export default function NotesTab() {
|
||||
fontFamily: 'inherit', flex: 1, minWidth: 0,
|
||||
}}
|
||||
/>
|
||||
<button onClick={() => setConfirmDelete(activeNote)} style={{
|
||||
width: 32, height: 32, borderRadius: 10,
|
||||
background: 'rgba(239,68,68,0.08)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: '#f87171', flexShrink: 0,
|
||||
}}>
|
||||
<Trash2 size={15} />
|
||||
<button
|
||||
onClick={() => setConfirmDelete(activeNote)}
|
||||
aria-label="Удалить заметку"
|
||||
style={{
|
||||
width: 44, height: 44, borderRadius: 12,
|
||||
background: 'var(--data-danger-bg)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: 'var(--data-danger)', flexShrink: 0,
|
||||
}}>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
@@ -414,6 +429,7 @@ export default function NotesTab() {
|
||||
{confirmDelete && (
|
||||
<div
|
||||
onClick={() => setConfirmDelete(null)}
|
||||
data-swipe-ignore
|
||||
style={{
|
||||
position: 'fixed', inset: 0, zIndex: 100,
|
||||
background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(12px)',
|
||||
|
||||
@@ -125,15 +125,15 @@ export default function TimerHomeWidget() {
|
||||
onClick={() => setModal({ type: 'create' })}
|
||||
aria-label="Новый таймер"
|
||||
style={{
|
||||
width: 32, height: 32, borderRadius: 10,
|
||||
background: 'color-mix(in srgb, #818cf8 12%, var(--surface-2))',
|
||||
border: '1px solid color-mix(in srgb, #818cf8 30%, var(--border-subtle))',
|
||||
color: '#a5b4fc',
|
||||
width: 44, height: 44, borderRadius: 14,
|
||||
background: 'color-mix(in srgb, var(--accent) 14%, var(--surface-2))',
|
||||
border: '1px solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle))',
|
||||
color: 'var(--accent)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<Plus size={15} />
|
||||
<Plus size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -69,6 +69,7 @@ export default function TimerModal({ mode, onClose }: TimerModalProps) {
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
onClick={onClose}
|
||||
data-swipe-ignore
|
||||
style={{
|
||||
position: 'fixed', inset: 0, zIndex: 250,
|
||||
background: 'rgba(5, 5, 15, 0.72)',
|
||||
|
||||
@@ -86,32 +86,41 @@ export default function TopBar({ sensors, haConnected }: TopBarProps) {
|
||||
</div>
|
||||
|
||||
{/* Right: sensors + weather */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, justifySelf: 'end' }}>
|
||||
{/* HA status */}
|
||||
<div title={haConnected ? 'Home Assistant подключён' : 'Home Assistant недоступен'} style={{
|
||||
width: 10, height: 10, borderRadius: '50%',
|
||||
background: haConnected ? '#34d399' : '#f87171',
|
||||
boxShadow: haConnected ? '0 0 8px rgba(52,211,153,0.5)' : '0 0 8px rgba(248,113,113,0.5)',
|
||||
transition: 'all 0.5s ease',
|
||||
flexShrink: 0,
|
||||
}} />
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, justifySelf: 'end' }}>
|
||||
{/* HA status — 44px hit-zone wrapping 14px dot */}
|
||||
<div
|
||||
title={haConnected ? 'Home Assistant подключён' : 'Home Assistant недоступен'}
|
||||
className="hit-zone"
|
||||
style={{ width: 44, height: 44 }}
|
||||
>
|
||||
<div style={{
|
||||
width: 14, height: 14, borderRadius: '50%',
|
||||
background: haConnected ? 'var(--data-good)' : 'var(--data-danger)',
|
||||
boxShadow: haConnected
|
||||
? '0 0 10px color-mix(in srgb, var(--data-good) 55%, transparent)'
|
||||
: '0 0 10px color-mix(in srgb, var(--data-danger) 55%, transparent)',
|
||||
transition: 'all 0.5s ease',
|
||||
flexShrink: 0,
|
||||
}} />
|
||||
</div>
|
||||
|
||||
{sensors && (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 4,
|
||||
padding: '8px 14px', borderRadius: 14,
|
||||
display: 'flex', alignItems: 'center', gap: 6,
|
||||
padding: '10px 16px', borderRadius: 16,
|
||||
minHeight: 44,
|
||||
background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
|
||||
}}>
|
||||
<Thermometer size={14} color="var(--text-tertiary)" />
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
|
||||
<Thermometer size={18} color="var(--data-hot)" strokeWidth={1.8} />
|
||||
<span className="num" style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', marginRight: 10 }}>
|
||||
{sensors.temperature}°
|
||||
</span>
|
||||
<Droplets size={14} color="var(--text-tertiary)" />
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
|
||||
<Droplets size={18} color="var(--data-cool)" strokeWidth={1.8} />
|
||||
<span className="num" style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', marginRight: 10 }}>
|
||||
{sensors.humidity}%
|
||||
</span>
|
||||
<Wind size={14} color="var(--text-tertiary)" />
|
||||
<span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
|
||||
<Wind size={18} color="var(--text-tertiary)" strokeWidth={1.8} />
|
||||
<span className="num" style={{ fontSize: 14, color: 'var(--text-secondary)' }}>
|
||||
{sensors.pm25}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -21,10 +21,12 @@ const DIRECTIONS: Direction[] = [
|
||||
{ stopId: '16354', short: 'Дыбенко', sub: 'от центра' },
|
||||
]
|
||||
|
||||
// Маршрут-специфичные цвета — соответствуют реальной окраске маршрутов
|
||||
// (но в правильной семантике: good=23, info=27, danger=39)
|
||||
const ROUTES: { num: string; color: string; bg: string }[] = [
|
||||
{ num: '23', color: '#10b981', bg: 'linear-gradient(135deg, #10b981, #059669)' },
|
||||
{ num: '27', color: '#3b82f6', bg: 'linear-gradient(135deg, #3b82f6, #2563eb)' },
|
||||
{ num: '39', color: '#ef4444', bg: 'linear-gradient(135deg, #ef4444, #dc2626)' },
|
||||
{ num: '23', color: 'var(--data-good)', bg: 'linear-gradient(135deg, var(--data-good), color-mix(in srgb, var(--data-good) 75%, black))' },
|
||||
{ num: '27', color: 'var(--data-info)', bg: 'linear-gradient(135deg, var(--data-info), color-mix(in srgb, var(--data-info) 75%, black))' },
|
||||
{ num: '39', color: 'var(--data-danger)', bg: 'linear-gradient(135deg, var(--data-danger), color-mix(in srgb, var(--data-danger) 75%, black))' },
|
||||
]
|
||||
|
||||
function Cell({ arrivals, color }: { arrivals: Arrival[]; color: string }) {
|
||||
@@ -189,7 +191,7 @@ export default function TransportWidget() {
|
||||
}}>
|
||||
<div style={{
|
||||
background: route.bg,
|
||||
boxShadow: `0 6px 16px -4px ${route.color}55`,
|
||||
boxShadow: `0 6px 16px -4px color-mix(in srgb, ${route.color} 35%, transparent)`,
|
||||
borderRadius: 12,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: 'white', fontWeight: 800, fontSize: 20,
|
||||
|
||||
@@ -191,6 +191,7 @@ export default function VoiceOverlay() {
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.35 }}
|
||||
data-swipe-ignore
|
||||
style={{
|
||||
position: 'fixed', inset: 0, zIndex: 300,
|
||||
background: 'rgba(5, 5, 15, 0.82)',
|
||||
|
||||
Reference in New Issue
Block a user