daniil/smart-home-tablet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: upcoming panel as slide-out overlay to prevent layout overflow on tablets
Some checks failed
Deploy / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Cosmo
2026-04-22 19:30:03 +00:00
parent 2c732d435b
commit d29deedc90
1 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/CalendarTab.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { useState, useEffect, useMemo } from 'react'
import { ChevronLeft, ChevronRight, Plus, X, Clock, MapPin, Trash2, Eye, EyeOff, CalendarDays, User, AlignLeft } from 'lucide-react'
import { ChevronLeft, ChevronRight, Plus, X, Clock, MapPin, Trash2, Eye, EyeOff, CalendarDays, User, AlignLeft, List } from 'lucide-react'
interface CalendarEvent {
id: string
@@ -350,6 +350,7 @@ export default function CalendarTab() {
const [addDate, setAddDate] = useState<string>('')
const [hiddenOwners, setHiddenOwners] = useState<Set<string>>(new Set())
const [dayPopover, setDayPopover] = useState<{ day: number; events: CalendarEvent[] } | null>(null)
const [showUpcoming, setShowUpcoming] = useState(false)
useEffect(() => {
setLoading(true)
@@ -431,7 +432,7 @@ export default function CalendarTab() {
}
return (
<div style={{ flex: 1, display: 'flex', overflow: 'hidden', padding: '16px 24px 24px', gap: 20 }}>
<div style={{ flex: 1, display: 'flex', overflow: 'hidden', padding: '16px 24px 24px', position: 'relative' }}>
{/* Main calendar grid */}
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
{/* Header */}
@@ -469,6 +470,16 @@ 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)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
transition: 'all 0.25s ease',
}}>
<List size={16} />
</button>
<button onClick={() => { setAddDate(today.toISOString().split('T')[0]); setShowAddModal(true) }} style={{
display: 'flex', alignItems: 'center', gap: 6,
padding: '8px 18px', borderRadius: 14,
@@ -556,11 +567,19 @@ export default function CalendarTab() {
</div>
</div>
{/* Right panel */}
{/* Right panel — overlay */}
{showUpcoming && <div style={{ position: 'fixed', inset: 0, zIndex: 90 }} onClick={() => setShowUpcoming(false)} />}
<div style={{
width: 230, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 10,
overflowY: 'auto', background: 'rgba(255,255,255,0.02)', borderRadius: 22,
padding: '20px 16px', border: '1px solid rgba(255,255,255,0.04)',
position: 'absolute', top: 16, right: 24, bottom: 24,
width: 240, display: 'flex', flexDirection: 'column', gap: 10,
overflowY: 'auto',
background: 'rgba(18,18,35,0.95)', backdropFilter: 'blur(30px)', WebkitBackdropFilter: 'blur(30px)',
borderRadius: 22, padding: '20px 16px',
border: '1px solid rgba(255,255,255,0.08)',
boxShadow: '0 16px 48px rgba(0,0,0,0.4)',
transform: showUpcoming ? 'translateX(0)' : 'translateX(calc(100% + 24px))',
transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
zIndex: 95, pointerEvents: showUpcoming ? 'auto' : 'none',
}}>
<div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>Ближайшие</div>
{upcoming.length === 0 && !loading && (