ui(topbar): move greeting from Home body to TopBar center
All checks were successful
Deploy / deploy (push) Successful in 2m43s
All checks were successful
Deploy / deploy (push) Successful in 2m43s
The big Доброе утро line on Home ate one row for marginal value. Moved it into TopBar as a center column via 3-col grid (1fr auto 1fr), so it appears on all tabs and leaves the Home body denser.
This commit is contained in:
14
app/page.tsx
14
app/page.tsx
@@ -368,7 +368,6 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
|
|||||||
const [todayEvents, setTodayEvents] = useState<CalendarEvent[]>([])
|
const [todayEvents, setTodayEvents] = useState<CalendarEvent[]>([])
|
||||||
const [tomorrowEvents, setTomorrowEvents] = useState<CalendarEvent[]>([])
|
const [tomorrowEvents, setTomorrowEvents] = useState<CalendarEvent[]>([])
|
||||||
const [calLoading, setCalLoading] = useState(true)
|
const [calLoading, setCalLoading] = useState(true)
|
||||||
const [greeting, setGreeting] = useState(getGreeting())
|
|
||||||
const [pinnedNotes, setPinnedNotes] = useState<any[]>([])
|
const [pinnedNotes, setPinnedNotes] = useState<any[]>([])
|
||||||
const [selectedDay, setSelectedDay] = useState<any>(null)
|
const [selectedDay, setSelectedDay] = useState<any>(null)
|
||||||
|
|
||||||
@@ -411,11 +410,6 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
|
|||||||
.catch(() => {})
|
.catch(() => {})
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const t = setInterval(() => setGreeting(getGreeting()), 60000)
|
|
||||||
return () => clearInterval(t)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -424,14 +418,6 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
|
|||||||
padding: '18px 22px 24px',
|
padding: '18px 22px 24px',
|
||||||
display: 'flex', flexDirection: 'column', gap: 14,
|
display: 'flex', flexDirection: 'column', gap: 14,
|
||||||
}}>
|
}}>
|
||||||
{/* ───── Greeting ───── */}
|
|
||||||
<h1 style={{
|
|
||||||
fontSize: 28, fontWeight: 800, color: 'var(--text-primary)',
|
|
||||||
letterSpacing: '-0.6px', margin: 0, lineHeight: 1.1,
|
|
||||||
}}>
|
|
||||||
{greeting} <span style={{ fontSize: 26 }}>👋</span>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
{/* ───── Bento row: Hero weather + Tram ───── */}
|
{/* ───── Bento row: Hero weather + Tram ───── */}
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 14, minHeight: 230 }}>
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 14, minHeight: 230 }}>
|
||||||
|
|
||||||
|
|||||||
@@ -26,6 +26,13 @@ function formatDate(date: Date): string {
|
|||||||
return `${weekday}, ${day} ${month}`
|
return `${weekday}, ${day} ${month}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getGreeting(h: number): string {
|
||||||
|
if (h >= 5 && h < 12) return 'Доброе утро'
|
||||||
|
if (h >= 12 && h < 17) return 'Добрый день'
|
||||||
|
if (h >= 17 && h < 22) return 'Добрый вечер'
|
||||||
|
return 'Доброй ночи'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
export default function TopBar({ sensors, haConnected }: TopBarProps) {
|
export default function TopBar({ sensors, haConnected }: TopBarProps) {
|
||||||
const [time, setTime] = useState(() => new Date())
|
const [time, setTime] = useState(() => new Date())
|
||||||
@@ -40,15 +47,16 @@ export default function TopBar({ sensors, haConnected }: TopBarProps) {
|
|||||||
<header
|
<header
|
||||||
style={{
|
style={{
|
||||||
height: 72,
|
height: 72,
|
||||||
display: 'flex',
|
display: 'grid',
|
||||||
|
gridTemplateColumns: '1fr auto 1fr',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'space-between',
|
|
||||||
padding: '0 24px',
|
padding: '0 24px',
|
||||||
borderBottom: '1px solid var(--hairline)',
|
borderBottom: '1px solid var(--hairline)',
|
||||||
background: 'transparent',
|
background: 'transparent',
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
zIndex: 5,
|
zIndex: 5,
|
||||||
|
gap: 16,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Left: time + date */}
|
{/* Left: time + date */}
|
||||||
@@ -67,8 +75,18 @@ export default function TopBar({ sensors, haConnected }: TopBarProps) {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Center: greeting */}
|
||||||
|
<div style={{
|
||||||
|
fontSize: 17, fontWeight: 700, color: 'var(--text-primary)',
|
||||||
|
letterSpacing: '-0.3px', justifySelf: 'center',
|
||||||
|
whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
|
||||||
|
maxWidth: '100%',
|
||||||
|
}}>
|
||||||
|
{getGreeting(time.getHours())} <span style={{ fontSize: 16 }}>👋</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Right: sensors + weather */}
|
{/* Right: sensors + weather */}
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6, justifySelf: 'end' }}>
|
||||||
{/* HA status */}
|
{/* HA status */}
|
||||||
<div title={haConnected ? 'Home Assistant подключён' : 'Home Assistant недоступен'} style={{
|
<div title={haConnected ? 'Home Assistant подключён' : 'Home Assistant недоступен'} style={{
|
||||||
width: 10, height: 10, borderRadius: '50%',
|
width: 10, height: 10, borderRadius: '50%',
|
||||||
|
|||||||
Reference in New Issue
Block a user