feat: redesigned Home (weather+forecast bar, today+tomorrow, pinned notes), fix snow animation, scrollable weather modal, weather hints

components/TopBar.tsx

@@ -161,6 +161,7 @@ export default function TopBar({ weather, sensors, haConnected }: TopBarProps) {
             position: 'fixed', inset: 0,
             background: 'rgba(0,0,0,0.65)', backdropFilter: 'blur(12px)',
             zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center',
+            overflowY: 'auto', padding: 20,
           }}
         >
           <div
@@ -168,7 +169,7 @@ export default function TopBar({ weather, sensors, haConnected }: TopBarProps) {
             style={{
               background: 'rgba(16,16,30,0.97)', backdropFilter: 'blur(40px)',
               border: '1px solid rgba(255,255,255,0.07)', borderRadius: 28,
-              width: 480, maxWidth: '95vw', overflow: 'hidden',
+              width: 480, maxWidth: '95vw', maxHeight: '90vh', overflow: 'auto',
               boxShadow: '0 30px 90px rgba(0,0,0,0.6)',
             }}
           >

components/WeatherAnimation.tsx

@@ -106,23 +106,22 @@ export default function WeatherAnimation({ condition, size = 64 }: WeatherAnimat
         {c === 'snow' && (
           <g>
             {[
-              { x: 42, delay: 0 },
-              { x: 52, delay: 0.4 },
-              { x: 62, delay: 0.8 },
-              { x: 47, delay: 1.2 },
-              { x: 57, delay: 0.2 },
+              { x: 44, delay: 0, size: 3 },
+              { x: 54, delay: 0.5, size: 2.5 },
+              { x: 64, delay: 1.0, size: 2 },
+              { x: 49, delay: 1.5, size: 2.5 },
+              { x: 59, delay: 0.3, size: 3 },
             ].map((flake, i) => (
-              <circle
-                key={i}
-                cx={flake.x} cy={72}
-                r={2.5}
-                fill="white"
-                opacity={0.8}
-                style={{
-                  animation: `snow-fall 2s ease-in-out infinite`,
-                  animationDelay: `${flake.delay}s`,
-                }}
-              />
+              <g key={i} style={{ animation: `snow-fall 2.5s linear infinite`, animationDelay: `${flake.delay}s` }}>
+                <text
+                  x={flake.x} y={70}
+                  fontSize={flake.size * 4}
+                  fill="white"
+                  opacity={0.85}
+                  textAnchor="middle"
+                  dominantBaseline="central"
+                >❄</text>
+              </g>
             ))}
           </g>
         )}