feat: forecast swipe nav, note swipe-to-delete, night-shift tint

- WeatherDayModal now accepts the full forecast array and an onChange
  callback; supports horizontal drag (framer-motion) plus prev/next
  chevrons and a dot-indicator. Drag > 60px switches day; style uses
  semantic tokens (shadow-xl, surface-1).
- NotesTab list items wrap each note in a motion.button with drag=x,
  constrained to -80px. Below it a gradient+trash reveal layer. Drag
  past 60px opens the existing confirmDelete modal.
- HomePageInner adds a night-shift overlay (fixed, mixBlendMode multiply,
  rgba(255,120,40,0.12)) active 22:00-06:00, auto-checked each minute,
  fades in/out over 800ms. No user toggle yet — fully automatic.

app/page.tsx

@@ -287,31 +287,82 @@ function LockScreen({ onUnlock }: { onUnlock: () => void }) {
 
 // ————— Home Tab —————
 // ————— Weather Day Detail Modal —————
-function WeatherDayModal({ day, current, onClose }: {
+type ForecastDay = { date: string; maxTemp: string; minTemp: string; desc: string; feelsLikeMax?: string; feelsLikeMin?: string; precipProb?: string; windSpeed?: string; humidity?: string }
-  day: { date: string; maxTemp: string; minTemp: string; desc: string; feelsLikeMax?: string; feelsLikeMin?: string; precipProb?: string; windSpeed?: string; humidity?: string }
+
+function WeatherDayModal({ day, days, current, onClose, onChange }: {
+  day: ForecastDay
+  days: ForecastDay[]
   current: WeatherData | null
   onClose: () => void
+  onChange: (d: ForecastDay) => void
 }) {
   const d = new Date(day.date)
   const isToday = d.toDateString() === new Date().toDateString()
   const dayLabel = isToday ? 'Сегодня' : d.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })
+  const idx = days.findIndex(x => x.date === day.date)
+  const canPrev = idx > 0
+  const canNext = idx >= 0 && idx < days.length - 1
+  const go = (delta: number) => {
+    const next = days[idx + delta]
+    if (next) onChange(next)
+  }
 
   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 style={{
+      <motion.div
-        background: 'rgba(16,16,30,0.97)', backdropFilter: 'blur(40px)',
+        key={day.date}
-        border: '1px solid rgba(255,255,255,0.07)', borderRadius: 28,
+        drag="x"
-        width: 400, maxWidth: '90vw', overflow: 'hidden',
+        dragConstraints={{ left: 0, right: 0 }}
-        boxShadow: '0 30px 90px rgba(0,0,0,0.6)',
+        dragElastic={0.15}
-      }} onClick={e => e.stopPropagation()}>
+        onDragEnd={(_, info) => {
+          if (info.offset.x < -60 && canNext) go(1)
+          else if (info.offset.x > 60 && canPrev) go(-1)
+        }}
+        initial={{ opacity: 0, scale: 0.96 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ type: 'spring', stiffness: 320, damping: 28 }}
+        style={{
+          background: 'var(--surface-1)',
+          border: '1px solid var(--border-subtle)', borderRadius: 28,
+          width: 420, maxWidth: '90vw', overflow: 'hidden',
+          boxShadow: 'var(--shadow-xl)',
+          touchAction: 'pan-y',
+        }}
+        onClick={e => e.stopPropagation()}
+      >
 
         {/* Hero */}
         <div style={{
-          background: 'linear-gradient(135deg, rgba(59,130,246,0.12), rgba(99,102,241,0.06))',
+          background: 'linear-gradient(135deg, var(--accent-glow), transparent)',
-          borderBottom: '1px solid rgba(59,130,246,0.1)',
+          borderBottom: '1px solid var(--hairline)',
-          padding: '28px 28px 24px', textAlign: 'center',
+          padding: '24px 28px 22px', textAlign: 'center',
           position: 'relative', overflow: 'hidden',
         }}>
+          {/* Prev/Next chevrons */}
+          {canPrev && (
+            <button
+              onClick={() => go(-1)}
+              style={{
+                position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)',
+                width: 36, height: 36, borderRadius: 12,
+                background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
+                color: 'var(--text-secondary)', zIndex: 2,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+              }}
+            >‹</button>
+          )}
+          {canNext && (
+            <button
+              onClick={() => go(1)}
+              style={{
+                position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
+                width: 36, height: 36, borderRadius: 12,
+                background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
+                color: 'var(--text-secondary)', zIndex: 2,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+              }}
+            >›</button>
+          )}
           <div style={{ position: 'absolute', top: -10, right: 10, opacity: 0.1, pointerEvents: 'none' }}>
             <WeatherAnimation condition={day.desc} size={100} />
           </div>
@@ -327,38 +378,55 @@ function WeatherDayModal({ day, current, onClose }: {
         </div>
 
         {/* Details grid */}
-        <div style={{ padding: '22px 28px 28px' }}>
+        <div style={{ padding: '20px 24px 20px' }}>
           <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
             {[
               { icon: <Thermometer size={18} color="#fb923c" />, bg: 'rgba(251,146,60,0.1)', label: 'Ощущается', value: `${day.feelsLikeMax || '—'}° / ${day.feelsLikeMin || '—'}°` },
               { icon: <Droplets size={18} color="#3b82f6" />, bg: 'rgba(59,130,246,0.1)', label: 'Влажность', value: `${day.humidity || (isToday && current ? current.humidity : '—')}%` },
               { icon: <Wind size={18} color="#22d3ee" />, bg: 'rgba(34,211,238,0.1)', label: 'Ветер', value: `${day.windSpeed || (isToday && current ? current.windSpeed : '—')} м/с` },
-              { icon: <span style={{ fontSize: 18 }}>🌧️</span>, bg: 'rgba(99,102,241,0.1)', label: 'Вероятность осадков', value: `${day.precipProb || '0'}%` },
+              { icon: <span style={{ fontSize: 18 }}>🌧️</span>, bg: 'rgba(99,102,241,0.1)', label: 'Осадки', value: `${day.precipProb || '0'}%` },
             ].map(item => (
               <div key={item.label} style={{
-                padding: '16px 14px', borderRadius: 16,
+                padding: '14px 12px', borderRadius: 14,
-                background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)',
+                background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
-                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
+                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
               }}>
                 <div style={{
-                  width: 38, height: 38, borderRadius: 12, background: item.bg,
+                  width: 36, height: 36, borderRadius: 11, background: item.bg,
                   display: 'flex', alignItems: 'center', justifyContent: 'center',
                 }}>{item.icon}</div>
-                <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--text-primary)' }}>{item.value}</div>
+                <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{item.value}</div>
                 <div style={{ fontSize: 11, color: 'var(--text-secondary)', textAlign: 'center' }}>{item.label}</div>
               </div>
             ))}
           </div>
 
+          {/* Dot indicator */}
+          {days.length > 1 && (
+            <div style={{ display: 'flex', gap: 5, justifyContent: 'center', marginTop: 14 }}>
+              {days.map((di, i) => (
+                <button
+                  key={di.date}
+                  onClick={() => onChange(di)}
+                  style={{
+                    width: i === idx ? 18 : 6, height: 6, borderRadius: 3,
+                    background: i === idx ? 'var(--accent)' : 'var(--surface-3)',
+                    transition: 'all 0.25s ease',
+                  }}
+                />
+              ))}
+            </div>
+          )}
+
           <button onClick={onClose} style={{
-            width: '100%', padding: '13px', borderRadius: 14, marginTop: 16,
+            width: '100%', padding: '12px', borderRadius: 14, marginTop: 12,
-            background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)',
+            background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
             color: 'var(--text-secondary)', fontSize: 14, fontWeight: 600,
           }}>
             Закрыть
           </button>
         </div>
-      </div>
+      </motion.div>
     </div>
   )
 }
@@ -697,7 +765,13 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
 
       {/* Weather day detail modal */}
       {selectedDay && (
-        <WeatherDayModal day={selectedDay} current={weather} onClose={() => setSelectedDay(null)} />
+        <WeatherDayModal
+          day={selectedDay}
+          days={weather?.forecast || []}
+          current={weather}
+          onClose={() => setSelectedDay(null)}
+          onChange={setSelectedDay}
+        />
       )}
     </div>
   )
@@ -909,6 +983,7 @@ function HomePageInner() {
     if (typeof window !== 'undefined') return localStorage.getItem('tablet-theme') || 'dark'
     return 'dark'
   })
+  const [nightShift, setNightShift] = useState(false)
   const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   // Theme
@@ -917,6 +992,17 @@ function HomePageInner() {
     localStorage.setItem('tablet-theme', theme)
   }, [theme])
 
+  // Night-shift tint (22:00–06:00)
+  useEffect(() => {
+    const check = () => {
+      const h = new Date().getHours()
+      setNightShift(h >= 22 || h < 6)
+    }
+    check()
+    const t = setInterval(check, 60_000)
+    return () => clearInterval(t)
+  }, [])
+
   // Auth check
   useEffect(() => {
     fetch('/api/auth')
@@ -1023,6 +1109,19 @@ function HomePageInner() {
 
       <Sidebar active={tab} onChange={setTab} />
 
+      {/* Night-shift warm tint overlay */}
+      <div
+        aria-hidden
+        style={{
+          position: 'fixed', inset: 0, zIndex: 150,
+          background: 'rgba(255, 120, 40, 0.12)',
+          mixBlendMode: 'multiply',
+          pointerEvents: 'none',
+          opacity: nightShift ? 1 : 0,
+          transition: 'opacity 0.8s ease',
+        }}
+      />
+
       <main style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 0, position: 'relative', zIndex: 1 }}>
         <TopBar sensors={sensors} haConnected={haConnected} />
 

components/NotesTab.tsx

@@ -1,5 +1,6 @@
 'use client'
 import { useState, useEffect, useCallback } from 'react'
+import { motion } from 'framer-motion'
 import { Plus, X, Trash2, ShoppingCart, FileText, Check, Circle, Calendar as CalendarIcon } from 'lucide-react'
 
 interface NoteItem {
@@ -144,11 +145,36 @@ export default function NotesTab() {
           const doneCount = note.items?.filter(i => i.done).length || 0
           const totalCount = note.items?.length || 0
           return (
-            <button key={note.id} onClick={() => setActiveNote(note)} style={{
+            <motion.div
+              key={note.id}
+              layout
+              style={{ position: 'relative', borderRadius: 16, overflow: 'hidden' }}
+            >
+              {/* Delete reveal layer */}
+              <div style={{
+                position: 'absolute', inset: 0,
+                display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
+                padding: '0 20px', borderRadius: 16,
+                background: 'linear-gradient(90deg, transparent 30%, rgba(239,68,68,0.25))',
+                pointerEvents: 'none',
+              }}>
+                <Trash2 size={18} color="#f87171" />
+              </div>
+              <motion.button
+                drag="x"
+                dragConstraints={{ left: -80, right: 0 }}
+                dragElastic={0.1}
+                onDragEnd={(_, info) => {
+                  if (info.offset.x < -60) setConfirmDelete(note)
+                }}
+                onClick={() => setActiveNote(note)}
+                style={{
                   padding: '14px 16px', borderRadius: 16, textAlign: 'left', width: '100%',
-              background: isActive ? `${note.color}15` : 'rgba(255,255,255,0.025)',
+                  background: isActive ? `${note.color}15` : 'var(--surface-2)',
-              border: `1px solid ${isActive ? note.color + '30' : 'rgba(255,255,255,0.05)'}`,
+                  border: `1px solid ${isActive ? note.color + '30' : 'var(--border-subtle)'}`,
-              transition: 'all 0.2s ease',
+                  transition: 'background 0.2s ease, border-color 0.2s ease',
+                  position: 'relative', zIndex: 1,
+                  touchAction: 'pan-y',
                 }}>
               <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                 {note.type === 'shopping'
@@ -185,7 +211,8 @@ export default function NotesTab() {
                   {note.text}
                 </div>
               )}
-            </button>
+              </motion.button>
+            </motion.div>
           )
         })}