weather

src/App.jsx

@@ -99,6 +99,7 @@ const App = () => {
   const [showSettings, setShowSettings] = useState(false);
   const [showDXFilters, setShowDXFilters] = useState(false);
   const [showPSKFilters, setShowPSKFilters] = useState(false);
+  const [weatherExpanded, setWeatherExpanded] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
   
   // Map layer visibility
@@ -613,31 +614,48 @@ const App = () => {
               </div>
             </div>
             
-            {/* Local Weather */}
+            {/* Local Weather — compact by default, click to expand */}
             {localWeather.data && (
-              <div style={{ marginTop: '12px', borderTop: '1px solid var(--border-color)', paddingTop: '12px' }}>
-                {/* Current conditions hero */}
-                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
-                  <span style={{ fontSize: '28px', lineHeight: 1 }}>{localWeather.data.icon}</span>
-                  <div style={{ flex: 1 }}>
-                    <div style={{ display: 'flex', alignItems: 'baseline', gap: '6px' }}>
-                      <span style={{ fontSize: '24px', fontWeight: '700', color: 'var(--text-primary)', fontFamily: 'Orbitron, monospace' }}>
+              <div style={{ marginTop: '12px', borderTop: '1px solid var(--border-color)', paddingTop: '10px' }}>
+                {/* Compact summary row — always visible */}
+                <div 
+                  onClick={() => setWeatherExpanded(!weatherExpanded)}
+                  style={{ 
+                    display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer',
+                    userSelect: 'none', padding: '2px 0',
+                  }}
+                >
+                  <span style={{ fontSize: '20px', lineHeight: 1 }}>{localWeather.data.icon}</span>
+                  <span style={{ fontSize: '18px', fontWeight: '700', color: 'var(--text-primary)', fontFamily: 'Orbitron, monospace' }}>
                     {localWeather.data.temp}°F
                   </span>
-                      {localWeather.data.todayHigh != null && (
+                  <span style={{ fontSize: '11px', color: 'var(--text-secondary)', flex: 1 }}>{localWeather.data.description}</span>
                   <span style={{ fontSize: '11px', color: 'var(--text-muted)', fontFamily: 'JetBrains Mono, monospace' }}>
+                    💨{localWeather.data.windSpeed}
+                  </span>
+                  <span style={{ 
+                    fontSize: '10px', color: 'var(--text-muted)', 
+                    transform: weatherExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.2s',
+                  }}>▼</span>
+                </div>
+                
+                {/* Expanded details */}
+                {weatherExpanded && (
+                  <div style={{ marginTop: '10px' }}>
+                    {/* Feels like + hi/lo */}
+                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '11px', marginBottom: '8px', fontFamily: 'JetBrains Mono, monospace' }}>
+                      {localWeather.data.feelsLike !== localWeather.data.temp && (
+                        <span style={{ color: 'var(--text-muted)' }}>Feels like {localWeather.data.feelsLike}°F</span>
+                      )}
+                      {localWeather.data.todayHigh != null && (
+                        <span style={{ color: 'var(--text-muted)', marginLeft: 'auto' }}>
                           <span style={{ color: 'var(--accent-amber)' }}>▲{localWeather.data.todayHigh}°</span>
                           {' '}
                           <span style={{ color: 'var(--accent-blue)' }}>▼{localWeather.data.todayLow}°</span>
                         </span>
                       )}
                     </div>
-                    <div style={{ fontSize: '11px', color: 'var(--text-secondary)' }}>{localWeather.data.description}</div>
-                    {localWeather.data.feelsLike !== localWeather.data.temp && (
-                      <div style={{ fontSize: '10px', color: 'var(--text-muted)' }}>Feels like {localWeather.data.feelsLike}°F</div>
-                    )}
-                  </div>
-                </div>
                     
                     {/* Detail grid */}
                     <div style={{ 
@@ -729,6 +747,8 @@ const App = () => {
                   </div>
                 )}
               </div>
+            )}
+          </div>
           
           {/* DX Location */}
           <div className="panel" style={{ padding: '14px', flex: '0 0 auto' }}>