From 09185c2a2ac4977f2c254f93a4ddd3d6482607fe Mon Sep 17 00:00:00 2001
From: Cosmo <cosmo@digital-home.site>
Date: Thu, 23 Apr 2026 08:36:56 +0000
Subject: [PATCH] fix(home): drop greeting date; fix touch scroll; tokenize
 TopBar icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removes the date label from the greeting row (user request — тoo dense
  on tablet and redundant with TopBar clock).
- Scrolling: drops overflowY: auto on the inner Events/Notes cards and
  removes flex: 1 / minHeight: 0 from their grid. On iPad-class touch
  nested scroll containers fought the root scroll; now only the root
  scrolls, which the browser handles natively.
- TopBar: replaces hardcoded rgba(255,255,255,X) on sensor icons, chip
  background, chip border and header bottom-border with semantic tokens
  (--text-tertiary, --surface-2, --border-subtle, --hairline) so the
  thermometer/humidity/wind icons are visible in light theme.
---
 app/page.tsx          | 29 ++++++++++-------------------
 components/TopBar.tsx | 10 +++++-----
 2 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index d8b4f4e..7b1a90a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -424,22 +424,13 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
       padding: '18px 22px 24px',
       display: 'flex', flexDirection: 'column', gap: 14,
     }}>
-      {/* ───── Greeting row ───── */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
-        <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>
-        <div style={{
-          fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600,
-          textTransform: 'capitalize', textAlign: 'right',
-          letterSpacing: '-0.1px',
-        }}>
-          {new Date().toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })}
-        </div>
-      </div>
+      {/* ───── 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 ───── */}
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 14, minHeight: 230 }}>
@@ -577,10 +568,10 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
       )}
 
       {/* ───── Events + Notes row ───── */}
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, flex: 1, minHeight: 0 }}>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
 
         {/* Events — today + tomorrow in one card */}
-        <div className="card" style={{ padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 14, overflowY: 'auto' }}>
+        <div className="card" style={{ padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
           {/* Today */}
           <div>
             <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
@@ -659,7 +650,7 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
         </div>
 
         {/* Notes */}
-        <div className="card" style={{ padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 12, overflowY: 'auto' }}>
+        <div className="card" style={{ padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
             <StickyNote size={13} color="var(--text-secondary)" />
             <span style={{ fontSize: 10, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700 }}>Заметки</span>
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index 3a8ef8f..a3464a9 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -44,7 +44,7 @@ export default function TopBar({ sensors, haConnected }: TopBarProps) {
           alignItems: 'center',
           justifyContent: 'space-between',
           padding: '0 24px',
-          borderBottom: '1px solid rgba(255,255,255,0.04)',
+          borderBottom: '1px solid var(--hairline)',
           background: 'transparent',
           flexShrink: 0,
           position: 'relative',
@@ -82,17 +82,17 @@ export default function TopBar({ sensors, haConnected }: TopBarProps) {
             <div style={{
               display: 'flex', alignItems: 'center', gap: 4,
               padding: '8px 14px', 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)',
             }}>
-              <Thermometer size={14} color="rgba(255,255,255,0.35)" />
+              <Thermometer size={14} color="var(--text-tertiary)" />
               <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
                 {sensors.temperature}°
               </span>
-              <Droplets size={14} color="rgba(255,255,255,0.35)" />
+              <Droplets size={14} color="var(--text-tertiary)" />
               <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
                 {sensors.humidity}%
               </span>
-              <Wind size={14} color="rgba(255,255,255,0.35)" />
+              <Wind size={14} color="var(--text-tertiary)" />
               <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
                 {sensors.pm25}
               </span>