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
97
app/api/countdowns/route.ts
Normal file
97
app/api/countdowns/route.ts
Normal file
@@ -0,0 +1,97 @@
|
||||
export const dynamic = 'force-dynamic'
|
||||
import { NextResponse } from 'next/server'
|
||||
import * as fs from 'fs'
|
||||
|
||||
const DATA_DIR = fs.existsSync('/data') ? '/data' : '/tmp'
|
||||
const COUNTDOWNS_PATH = `${DATA_DIR}/tablet-countdowns.json`
|
||||
|
||||
export interface Countdown {
|
||||
id: string
|
||||
label: string
|
||||
date: string // YYYY-MM-DD
|
||||
emoji?: string
|
||||
color?: string // hex or data-* token name (e.g. "data-rose")
|
||||
note?: string
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
const DEFAULT_COUNTDOWNS: Countdown[] = [
|
||||
{
|
||||
id: 'tokyo',
|
||||
label: 'Токио',
|
||||
date: '2026-10-15',
|
||||
emoji: '🗼',
|
||||
color: 'data-rose',
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
]
|
||||
|
||||
function load(): Countdown[] {
|
||||
try {
|
||||
if (fs.existsSync(COUNTDOWNS_PATH)) {
|
||||
return JSON.parse(fs.readFileSync(COUNTDOWNS_PATH, 'utf-8'))
|
||||
}
|
||||
// первая загрузка — создать дефолтный файл
|
||||
save(DEFAULT_COUNTDOWNS)
|
||||
return DEFAULT_COUNTDOWNS
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function save(list: Countdown[]) {
|
||||
try {
|
||||
fs.writeFileSync(COUNTDOWNS_PATH, JSON.stringify(list, null, 2))
|
||||
} catch {}
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
const all = load()
|
||||
// сортируем по дате возрастания
|
||||
const sorted = [...all].sort((a, b) => a.date.localeCompare(b.date))
|
||||
return NextResponse.json({ countdowns: sorted })
|
||||
}
|
||||
|
||||
export async function POST(req: Request) {
|
||||
const body = await req.json()
|
||||
if (!body.label || !body.date) {
|
||||
return NextResponse.json({ error: 'label_and_date_required' }, { status: 400 })
|
||||
}
|
||||
const list = load()
|
||||
const cd: Countdown = {
|
||||
id: Date.now().toString(36) + Math.random().toString(36).slice(2, 6),
|
||||
label: String(body.label).slice(0, 60),
|
||||
date: String(body.date).slice(0, 10),
|
||||
emoji: body.emoji?.slice(0, 4) || undefined,
|
||||
color: body.color || undefined,
|
||||
note: body.note?.slice(0, 200) || undefined,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
}
|
||||
list.push(cd)
|
||||
save(list)
|
||||
return NextResponse.json({ countdown: cd })
|
||||
}
|
||||
|
||||
export async function PUT(req: Request) {
|
||||
const body = await req.json()
|
||||
const { id, ...updates } = body
|
||||
if (!id) return NextResponse.json({ error: 'id_required' }, { status: 400 })
|
||||
const list = load()
|
||||
const idx = list.findIndex(c => c.id === id)
|
||||
if (idx < 0) return NextResponse.json({ error: 'not_found' }, { status: 404 })
|
||||
list[idx] = { ...list[idx], ...updates, id, updatedAt: new Date().toISOString() }
|
||||
save(list)
|
||||
return NextResponse.json({ countdown: list[idx] })
|
||||
}
|
||||
|
||||
export async function DELETE(req: Request) {
|
||||
const url = new URL(req.url)
|
||||
const id = url.searchParams.get('id')
|
||||
if (!id) return NextResponse.json({ error: 'id_required' }, { status: 400 })
|
||||
const list = load().filter(c => c.id !== id)
|
||||
save(list)
|
||||
return NextResponse.json({ ok: true })
|
||||
}
|
||||
137
app/globals.css
137
app/globals.css
@@ -26,11 +26,32 @@
|
||||
--text-secondary: rgba(255, 255, 255, 0.6);
|
||||
--text-tertiary: rgba(255, 255, 255, 0.38);
|
||||
|
||||
/* Accents */
|
||||
/* Accents — UI */
|
||||
--accent: #818cf8;
|
||||
--accent-strong: #6366f1;
|
||||
--accent-secondary: #22d3ee;
|
||||
--accent-glow: rgba(129, 140, 248, 0.22);
|
||||
|
||||
/* Data palette — semantic, theme-aware */
|
||||
--data-cool: #38bdf8; /* небо, влажность, охлаждение */
|
||||
--data-info: #60a5fa; /* ссылки, second-accent */
|
||||
--data-good: #34d399; /* успех, здоровье, streak */
|
||||
--data-warm: #fbbf24; /* свет, тепло, утро */
|
||||
--data-hot: #fb923c; /* обострение, urgent-minor */
|
||||
--data-danger: #f87171; /* критичное, истёк, ошибка */
|
||||
--data-rose: #f472b6; /* Света, романтика */
|
||||
--data-violet: #a78bfa; /* Cosmo, индиго-вариант */
|
||||
--data-mood: #8b5cf6; /* секреты, события 2-го уровня */
|
||||
|
||||
/* Soft backgrounds for data (color-mix with surface-2) */
|
||||
--data-cool-bg: color-mix(in srgb, var(--data-cool) 12%, var(--surface-2));
|
||||
--data-good-bg: color-mix(in srgb, var(--data-good) 12%, var(--surface-2));
|
||||
--data-warm-bg: color-mix(in srgb, var(--data-warm) 12%, var(--surface-2));
|
||||
--data-hot-bg: color-mix(in srgb, var(--data-hot) 14%, var(--surface-2));
|
||||
--data-danger-bg: color-mix(in srgb, var(--data-danger) 12%, var(--surface-2));
|
||||
--data-rose-bg: color-mix(in srgb, var(--data-rose) 12%, var(--surface-2));
|
||||
--data-violet-bg: color-mix(in srgb, var(--data-violet) 12%, var(--surface-2));
|
||||
|
||||
/* Brand gradients */
|
||||
--gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||
--gradient-warm: linear-gradient(135deg, #f59e0b, #ef4444);
|
||||
@@ -54,6 +75,18 @@
|
||||
--radius-lg: 22px;
|
||||
--radius-xl: 28px;
|
||||
|
||||
/* Layout rhythm */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 22px;
|
||||
--space-6: 28px;
|
||||
|
||||
/* Touch */
|
||||
--touch-min: 44px;
|
||||
--touch-comfy: 56px;
|
||||
|
||||
/* Legacy aliases */
|
||||
--sidebar-bg: var(--bg);
|
||||
--card-bg: var(--surface-1);
|
||||
@@ -84,9 +117,30 @@
|
||||
--text-tertiary: rgba(15, 20, 40, 0.38);
|
||||
|
||||
--accent: #5b63e0;
|
||||
--accent-strong: #4f46e5;
|
||||
--accent-secondary: #0891b2;
|
||||
--accent-glow: rgba(91, 99, 224, 0.14);
|
||||
|
||||
/* Data palette — slightly darker in light theme for contrast */
|
||||
--data-cool: #0284c7;
|
||||
--data-info: #2563eb;
|
||||
--data-good: #059669;
|
||||
--data-warm: #d97706;
|
||||
--data-hot: #ea580c;
|
||||
--data-danger: #dc2626;
|
||||
--data-rose: #db2777;
|
||||
--data-violet: #7c3aed;
|
||||
--data-mood: #6d28d9;
|
||||
|
||||
/* Soft backgrounds — lighter mix for light theme */
|
||||
--data-cool-bg: color-mix(in srgb, var(--data-cool) 9%, var(--surface-1));
|
||||
--data-good-bg: color-mix(in srgb, var(--data-good) 9%, var(--surface-1));
|
||||
--data-warm-bg: color-mix(in srgb, var(--data-warm) 9%, var(--surface-1));
|
||||
--data-hot-bg: color-mix(in srgb, var(--data-hot) 10%, var(--surface-1));
|
||||
--data-danger-bg: color-mix(in srgb, var(--data-danger) 9%, var(--surface-1));
|
||||
--data-rose-bg: color-mix(in srgb, var(--data-rose) 9%, var(--surface-1));
|
||||
--data-violet-bg: color-mix(in srgb, var(--data-violet) 9%, var(--surface-1));
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(15, 20, 40, 0.05);
|
||||
--shadow-md: 0 2px 6px rgba(15, 20, 40, 0.06), 0 12px 28px -8px rgba(15, 20, 40, 0.1);
|
||||
--shadow-lg: 0 4px 10px rgba(15, 20, 40, 0.06), 0 24px 60px -12px rgba(15, 20, 40, 0.14);
|
||||
@@ -112,6 +166,41 @@ html, body {
|
||||
|
||||
#__next, main { height: 100%; }
|
||||
|
||||
/* Better tabular numbers across the app */
|
||||
.num, .num-display {
|
||||
font-variant-numeric: tabular-nums slashed-zero;
|
||||
font-feature-settings: "tnum", "zero";
|
||||
}
|
||||
.num-display {
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 800;
|
||||
line-height: 0.95;
|
||||
}
|
||||
|
||||
/* ——————————————————————————————
|
||||
Grain overlay
|
||||
——— subtle SVG-noise; cheap, no image asset needed
|
||||
—————————————————————————————— */
|
||||
.grain {
|
||||
position: relative;
|
||||
}
|
||||
.grain::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
opacity: 0.035;
|
||||
mix-blend-mode: overlay;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
||||
background-size: 120px 120px;
|
||||
}
|
||||
.light .grain::after {
|
||||
opacity: 0.05;
|
||||
mix-blend-mode: multiply;
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
/* ——————————————————————————————
|
||||
Aurora
|
||||
—————————————————————————————— */
|
||||
@@ -178,6 +267,23 @@ html, body {
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
/* Focus-card styling — for the context-aware hero */
|
||||
.focus-card {
|
||||
position: relative;
|
||||
background: var(--surface-1);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
.focus-card-accent::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at top right, var(--accent-glow), transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: var(--surface-1);
|
||||
border: 1px solid var(--border-subtle);
|
||||
@@ -186,6 +292,32 @@ html, body {
|
||||
}
|
||||
.glass-card:hover { background: var(--surface-hover); }
|
||||
|
||||
/* Hairline divider helper */
|
||||
.divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: var(--hairline);
|
||||
}
|
||||
|
||||
/* Chip / hit-zone — wraps small icons into 44px tap surface */
|
||||
.hit-zone {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: var(--touch-min);
|
||||
min-height: var(--touch-min);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Small uppercase label */
|
||||
.eyebrow {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
@@ -205,7 +337,8 @@ button {
|
||||
}
|
||||
button:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
outline-offset: 3px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
|
||||
227
app/page.tsx
227
app/page.tsx
@@ -14,9 +14,13 @@ import WeatherAnimation from '@/components/WeatherAnimation'
|
||||
import VoiceOverlay from '@/components/VoiceOverlay'
|
||||
import TimerWidget from '@/components/TimerWidget'
|
||||
import TimerHomeWidget from '@/components/TimerHomeWidget'
|
||||
import FocusCard from '@/components/FocusCard'
|
||||
import CountdownCard from '@/components/CountdownCard'
|
||||
|
||||
type Tab = 'home' | 'devices' | 'calendar' | 'notes' | 'settings'
|
||||
|
||||
const TAB_ORDER: Tab[] = ['home', 'devices', 'calendar', 'notes', 'settings']
|
||||
|
||||
interface WeatherData {
|
||||
temp: string
|
||||
desc: string
|
||||
@@ -311,7 +315,7 @@ function WeatherDayModal({ day, days, current, onClose, onChange }: {
|
||||
}
|
||||
|
||||
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}>
|
||||
<motion.div
|
||||
key={day.date}
|
||||
drag="x"
|
||||
@@ -345,11 +349,12 @@ function WeatherDayModal({ day, days, current, onClose, onChange }: {
|
||||
{canPrev && (
|
||||
<button
|
||||
onClick={() => go(-1)}
|
||||
aria-label="Предыдущий день"
|
||||
style={{
|
||||
position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)',
|
||||
width: 36, height: 36, borderRadius: 12,
|
||||
width: 48, height: 48, borderRadius: 14,
|
||||
background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
|
||||
color: 'var(--text-secondary)', zIndex: 2,
|
||||
color: 'var(--text-secondary)', zIndex: 2, fontSize: 22,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>‹</button>
|
||||
@@ -357,11 +362,12 @@ function WeatherDayModal({ day, days, current, onClose, onChange }: {
|
||||
{canNext && (
|
||||
<button
|
||||
onClick={() => go(1)}
|
||||
aria-label="Следующий день"
|
||||
style={{
|
||||
position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
|
||||
width: 36, height: 36, borderRadius: 12,
|
||||
width: 48, height: 48, borderRadius: 14,
|
||||
background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
|
||||
color: 'var(--text-secondary)', zIndex: 2,
|
||||
color: 'var(--text-secondary)', zIndex: 2, fontSize: 22,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>›</button>
|
||||
@@ -422,7 +428,8 @@ function WeatherDayModal({ day, days, current, onClose, onChange }: {
|
||||
)}
|
||||
|
||||
<button onClick={onClose} style={{
|
||||
width: '100%', padding: '12px', borderRadius: 14, marginTop: 12,
|
||||
width: '100%', padding: '16px', borderRadius: 14, marginTop: 12,
|
||||
minHeight: 48,
|
||||
background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
|
||||
color: 'var(--text-secondary)', fontSize: 14, fontWeight: 600,
|
||||
}}>
|
||||
@@ -441,6 +448,8 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
|
||||
const [calLoading, setCalLoading] = useState(true)
|
||||
const [pinnedNotes, setPinnedNotes] = useState<any[]>([])
|
||||
const [selectedDay, setSelectedDay] = useState<any>(null)
|
||||
const [countdowns, setCountdowns] = useState<{ label: string; date: string }[]>([])
|
||||
const [tramNext, setTramNext] = useState<{ route: string; minutes: number; direction: string } | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/calendar?range=today')
|
||||
@@ -479,8 +488,58 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
|
||||
setPinnedNotes((pinned.length ? pinned : all).slice(0, 3))
|
||||
})
|
||||
.catch(() => {})
|
||||
|
||||
// Countdowns
|
||||
fetch('/api/countdowns')
|
||||
.then(r => r.json())
|
||||
.then(d => setCountdowns((d.countdowns || []).map((c: any) => ({ label: c.label, date: c.date }))))
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
// Nearest upcoming tram — refresh every 30s so FocusCard stays current
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
const STOP_IDS = [
|
||||
{ id: '16226', direction: 'в центр' },
|
||||
{ id: '16354', direction: 'от центра' },
|
||||
]
|
||||
const load = async () => {
|
||||
try {
|
||||
const results = await Promise.all(
|
||||
STOP_IDS.map(s =>
|
||||
fetch(`/api/transport?stopId=${s.id}`)
|
||||
.then(r => r.json())
|
||||
.then(j => (j.arrivals || []).map((a: any) => ({ ...a, direction: s.direction })))
|
||||
.catch(() => [])
|
||||
)
|
||||
)
|
||||
const all = results.flat().filter(a => typeof a.minutes === 'number' && a.minutes >= 0)
|
||||
all.sort((a: any, b: any) => a.minutes - b.minutes)
|
||||
if (!cancelled) {
|
||||
setTramNext(all[0] ? {
|
||||
route: all[0].route,
|
||||
minutes: all[0].minutes,
|
||||
direction: all[0].direction,
|
||||
} : null)
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
load()
|
||||
const t = setInterval(load, 30_000)
|
||||
return () => { cancelled = true; clearInterval(t) }
|
||||
}, [])
|
||||
|
||||
// Next event (today or tomorrow) — сейчас or nearest upcoming within next 24h
|
||||
const nextEvent = (() => {
|
||||
const now = Date.now()
|
||||
const pool = [...todayEvents, ...tomorrowEvents]
|
||||
.filter(e => !e.allDay)
|
||||
.map(e => ({ e, t: new Date(e.start).getTime() }))
|
||||
.filter(({ t }) => t >= now - 5 * 60_000)
|
||||
.sort((a, b) => a.t - b.t)
|
||||
return pool[0]?.e || null
|
||||
})()
|
||||
|
||||
|
||||
|
||||
return (
|
||||
@@ -489,87 +548,19 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
|
||||
padding: '18px 22px 24px',
|
||||
display: 'flex', flexDirection: 'column', gap: 14,
|
||||
}}>
|
||||
{/* ───── Bento row: Hero weather + Tram ───── */}
|
||||
{/* ───── Bento row: Focus hero + Tram ───── */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)', gap: 14, alignItems: 'stretch' }}>
|
||||
|
||||
{/* Hero weather card */}
|
||||
{weather ? (
|
||||
<div
|
||||
className="card-hero"
|
||||
onClick={() => weather?.forecast?.[0] && setSelectedDay(weather.forecast[0])}
|
||||
style={{
|
||||
padding: '22px 24px',
|
||||
display: 'flex', flexDirection: 'column',
|
||||
position: 'relative', overflow: 'hidden',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{/* Decorative animation, large, behind */}
|
||||
<div style={{
|
||||
position: 'absolute', top: -24, right: -12,
|
||||
opacity: 0.14, pointerEvents: 'none',
|
||||
}}>
|
||||
<WeatherAnimation condition={weather.desc} size={160} />
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
fontSize: 11, color: 'var(--text-tertiary)', fontWeight: 700,
|
||||
textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 8,
|
||||
position: 'relative', zIndex: 1,
|
||||
}}>
|
||||
Сейчас
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 12,
|
||||
position: 'relative', zIndex: 1, marginBottom: 6,
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: 64, fontWeight: 800, letterSpacing: '-3px',
|
||||
color: 'var(--text-primary)', lineHeight: 0.9,
|
||||
fontVariantNumeric: 'tabular-nums',
|
||||
}}>
|
||||
{weather.temp}°
|
||||
</div>
|
||||
<WeatherAnimation condition={weather.desc} size={52} />
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
fontSize: 16, color: 'var(--text-primary)', fontWeight: 600,
|
||||
position: 'relative', zIndex: 1, marginBottom: 12,
|
||||
}}>
|
||||
{weather.desc}
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
display: 'flex', gap: 16, flexWrap: 'wrap',
|
||||
marginTop: 'auto', position: 'relative', zIndex: 1,
|
||||
}}>
|
||||
{weather.feelsLike && (
|
||||
<div>
|
||||
<div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Ощущается</div>
|
||||
<div style={{ fontSize: 15, color: 'var(--text-primary)', fontWeight: 700, marginTop: 2 }}>{weather.feelsLike}°</div>
|
||||
</div>
|
||||
)}
|
||||
{weather.humidity && (
|
||||
<div>
|
||||
<div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Влажность</div>
|
||||
<div style={{ fontSize: 15, color: 'var(--text-primary)', fontWeight: 700, marginTop: 2 }}>{weather.humidity}</div>
|
||||
</div>
|
||||
)}
|
||||
{weather.windSpeed && (
|
||||
<div>
|
||||
<div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Ветер</div>
|
||||
<div style={{ fontSize: 15, color: 'var(--text-primary)', fontWeight: 700, marginTop: 2 }}>{weather.windSpeed}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="card-hero" style={{ padding: '22px 24px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-tertiary)', fontSize: 13 }}>
|
||||
Загрузка погоды...
|
||||
</div>
|
||||
)}
|
||||
{/* Focus — контекст-hero */}
|
||||
<FocusCard
|
||||
weather={weather ? { temp: weather.temp, desc: weather.desc, feelsLike: weather.feelsLike } : null}
|
||||
tramNext={tramNext}
|
||||
nextEvent={nextEvent ? {
|
||||
id: nextEvent.id, title: nextEvent.title, start: nextEvent.start,
|
||||
allDay: nextEvent.allDay, ownerName: nextEvent.ownerName, color: nextEvent.color,
|
||||
} : null}
|
||||
countdowns={countdowns}
|
||||
/>
|
||||
|
||||
{/* Tram */}
|
||||
<TransportWidget />
|
||||
@@ -592,28 +583,28 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
|
||||
<button
|
||||
onClick={() => setSelectedDay(day)}
|
||||
style={{
|
||||
flex: 1, padding: '8px 4px', borderRadius: 14,
|
||||
flex: 1, padding: '12px 8px', borderRadius: 14,
|
||||
minHeight: 92,
|
||||
background: isToday ? 'var(--surface-2)' : 'transparent',
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
|
||||
transition: 'background 0.2s ease',
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
|
||||
fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
|
||||
color: isToday ? 'var(--accent)' : 'var(--text-tertiary)',
|
||||
}}>
|
||||
{isToday ? 'Сей' : d.toLocaleDateString('ru-RU', { weekday: 'short' }).replace('.', '').slice(0, 2)}
|
||||
</div>
|
||||
<div style={{ fontSize: 20 }}>{getWeatherIcon(day.desc)}</div>
|
||||
<div style={{
|
||||
fontSize: 14, fontWeight: 800, color: 'var(--text-primary)',
|
||||
letterSpacing: '-0.5px', fontVariantNumeric: 'tabular-nums',
|
||||
<div style={{ fontSize: 22 }}>{getWeatherIcon(day.desc)}</div>
|
||||
<div className="num" style={{
|
||||
fontSize: 15, fontWeight: 800, color: 'var(--text-primary)',
|
||||
letterSpacing: '-0.5px',
|
||||
}}>
|
||||
{day.maxTemp}°
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: 11, color: 'var(--text-tertiary)', fontWeight: 500,
|
||||
fontVariantNumeric: 'tabular-nums',
|
||||
<div className="num" style={{
|
||||
fontSize: 12, color: 'var(--text-tertiary)', fontWeight: 500,
|
||||
}}>
|
||||
{day.minTemp}°
|
||||
</div>
|
||||
@@ -710,6 +701,16 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
|
||||
<TimerHomeWidget />
|
||||
</div>
|
||||
|
||||
{/* ───── Row 4: Countdown ───── */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'minmax(260px, 1fr) minmax(0, 2fr)',
|
||||
gap: 14,
|
||||
}}>
|
||||
<CountdownCard />
|
||||
<div /> {/* место под будущий виджет */}
|
||||
</div>
|
||||
|
||||
{/* Weather day detail modal */}
|
||||
{selectedDay && (
|
||||
<WeatherDayModal
|
||||
@@ -1022,6 +1023,35 @@ function HomePageInner() {
|
||||
}
|
||||
}, [unlocked, resetIdle])
|
||||
|
||||
// Swipe between tabs — edge-initiated horizontal drag
|
||||
const swipeStart = useRef<{ x: number; y: number; t: number; id: number } | null>(null)
|
||||
const handlePointerDown = (e: React.PointerEvent) => {
|
||||
// Only primary pointer / touch
|
||||
if (e.pointerType === 'mouse' && e.button !== 0) return
|
||||
swipeStart.current = { x: e.clientX, y: e.clientY, t: Date.now(), id: e.pointerId }
|
||||
}
|
||||
const handlePointerUp = (e: React.PointerEvent) => {
|
||||
const s = swipeStart.current
|
||||
swipeStart.current = null
|
||||
if (!s || s.id !== e.pointerId) return
|
||||
const dx = e.clientX - s.x
|
||||
const dy = e.clientY - s.y
|
||||
const dt = Date.now() - s.t
|
||||
// Conditions: fast enough, mostly horizontal, big enough
|
||||
const isHorizontal = Math.abs(dx) > Math.abs(dy) * 1.6
|
||||
const isLong = Math.abs(dx) > 90
|
||||
const isFast = dt < 600 || Math.abs(dx) > 160
|
||||
if (!(isHorizontal && isLong && isFast)) return
|
||||
// Don't steal swipe from elements that draggable-own (notes swipe-to-delete, weather modal, timer cards).
|
||||
const target = e.target as HTMLElement | null
|
||||
if (target?.closest('[data-swipe-ignore]')) return
|
||||
const idx = TAB_ORDER.indexOf(tab)
|
||||
if (idx < 0) return
|
||||
const nextIdx = dx < 0 ? idx + 1 : idx - 1
|
||||
if (nextIdx < 0 || nextIdx >= TAB_ORDER.length) return
|
||||
setTab(TAB_ORDER[nextIdx])
|
||||
}
|
||||
|
||||
const devicesInRoom = DEVICES_BY_ROOM[activeRoom] || []
|
||||
const getDeviceState = (haKey?: string): boolean => {
|
||||
if (!haKey || !haStates[haKey]) return false
|
||||
@@ -1072,7 +1102,12 @@ function HomePageInner() {
|
||||
}}
|
||||
/>
|
||||
|
||||
<main style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 0, position: 'relative', zIndex: 1 }}>
|
||||
<main
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerUp={handlePointerUp}
|
||||
onPointerCancel={() => { swipeStart.current = null }}
|
||||
style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 0, position: 'relative', zIndex: 1 }}
|
||||
>
|
||||
<TopBar sensors={sensors} haConnected={haConnected} />
|
||||
|
||||
<AnimatePresence mode="sync" initial={false}>
|
||||
|
||||
Reference in New Issue
Block a user