ui(topbar): move greeting from Home body to TopBar center
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:
Cosmo
2026-04-23 08:38:41 +00:00
parent 09185c2a2a
commit e967924f1f
2 changed files with 21 additions and 17 deletions

View File

@@ -26,6 +26,13 @@ function formatDate(date: Date): string {
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) {
const [time, setTime] = useState(() => new Date())
@@ -40,15 +47,16 @@ export default function TopBar({ sensors, haConnected }: TopBarProps) {
<header
style={{
height: 72,
display: 'flex',
display: 'grid',
gridTemplateColumns: '1fr auto 1fr',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0 24px',
borderBottom: '1px solid var(--hairline)',
background: 'transparent',
flexShrink: 0,
position: 'relative',
zIndex: 5,
gap: 16,
}}
>
{/* Left: time + date */}
@@ -67,8 +75,18 @@ export default function TopBar({ sensors, haConnected }: TopBarProps) {
</span>
</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 */}
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
<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%',