diff --git a/src/App.jsx b/src/App.jsx index 0895bb9..d213cb3 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -229,8 +229,8 @@ const App = () => { transform: `scale(${scale})`, transformOrigin: 'center center', display: 'grid', - gridTemplateColumns: '260px 1fr 300px', - gridTemplateRows: '50px 1fr', + gridTemplateColumns: '270px 1fr 300px', + gridTemplateRows: '65px 1fr', gap: '8px', padding: '8px', overflow: 'hidden', @@ -255,31 +255,31 @@ const App = () => { {/* LEFT SIDEBAR */}
{/* DE Location */} -
-
📍 DE - YOUR LOCATION
-
-
{deGrid}
-
{config.location.lat.toFixed(2)}°, {config.location.lon.toFixed(2)}°
-
+
+
📍 DE - YOUR LOCATION
+
+
{deGrid}
+
{config.location.lat.toFixed(4)}°, {config.location.lon.toFixed(4)}°
+
☀ - {deSunTimes.sunrise} + {deSunTimes.sunrise} → - {deSunTimes.sunset} + {deSunTimes.sunset}
{/* DX Location */} -
-
🎯 DX - TARGET
-
-
{dxGrid}
-
{dxLocation.lat.toFixed(2)}°, {dxLocation.lon.toFixed(2)}°
-
+
+
🎯 DX - TARGET
+
+
{dxGrid}
+
{dxLocation.lat.toFixed(4)}°, {dxLocation.lon.toFixed(4)}°
+
☀ - {dxSunTimes.sunrise} + {dxSunTimes.sunrise} → - {dxSunTimes.sunset} + {dxSunTimes.sunset}
diff --git a/src/components/DXFilterManager.jsx b/src/components/DXFilterManager.jsx index 9b642bf..bd3f218 100644 --- a/src/components/DXFilterManager.jsx +++ b/src/components/DXFilterManager.jsx @@ -1,6 +1,6 @@ /** * DXFilterManager Component - * Filter modal with tabs for Zones, Bands, Modes, Watchlist, Exclude + * Filter modal with tabs for Zones, Bands, Modes, Watchlist, Exclude, Settings */ import React, { useState } from 'react'; @@ -313,6 +313,77 @@ export const DXFilterManager = ({ filters, onFilterChange, isOpen, onClose }) =>
); + const renderSettingsTab = () => { + const retentionMinutes = filters?.spotRetentionMinutes || 30; + + return ( +
+
+
+ Spot Retention Time +
+
+ How long to keep DX spots on the map before they expire. Shorter times show only the most recent activity. +
+
+ onFilterChange({ ...filters, spotRetentionMinutes: parseInt(e.target.value) })} + style={{ flex: 1, cursor: 'pointer' }} + /> +
+ {retentionMinutes} min +
+
+
+ 5 min (freshest) + 30 min (default) +
+
+ +
+
+ Quick Presets +
+
+ {[5, 10, 15, 20, 30].map(mins => ( + + ))} +
+
+
+ ); + }; + return (
+
{/* Tab Content */} @@ -400,6 +472,7 @@ export const DXFilterManager = ({ filters, onFilterChange, isOpen, onClose }) => {activeTab === 'modes' && renderModesTab()} {activeTab === 'watchlist' && renderWatchlistTab()} {activeTab === 'exclude' && renderExcludeTab()} + {activeTab === 'settings' && renderSettingsTab()}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 219421e..7084b7e 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -27,13 +27,14 @@ export const Header = ({ background: 'var(--bg-panel)', border: '1px solid var(--border-color)', borderRadius: '6px', - padding: '0 16px', + padding: '8px 20px', + minHeight: '60px', fontFamily: 'JetBrains Mono, monospace' }}> {/* Callsign & Settings */}
@@ -43,25 +44,25 @@ export const Header = ({
{/* UTC Clock */} -
- UTC - {utcTime} - {utcDate} +
+ UTC + {utcTime} + {utcDate}
{/* Local Clock - Clickable to toggle 12/24 hour format */}
- LOCAL - {localTime} - {localDate} + LOCAL + {localTime} + {localDate}
{/* Weather & Solar Stats */} -
+
{localWeather?.data && (
{localWeather.data.icon} @@ -72,17 +73,17 @@ export const Header = ({ )}
SFI - {spaceWeather?.data?.solarFlux || '--'} + {spaceWeather?.data?.solarFlux || '--'}
K - = 4 ? 'var(--accent-red)' : 'var(--accent-green)', fontWeight: '600' }}> + = 4 ? 'var(--accent-red)' : 'var(--accent-green)', fontWeight: '700', fontSize: '16px' }}> {spaceWeather?.data?.kIndex ?? '--'}
SSN - {spaceWeather?.data?.sunspotNumber || '--'} + {spaceWeather?.data?.sunspotNumber || '--'}
@@ -95,7 +96,7 @@ export const Header = ({ style={{ background: 'linear-gradient(135deg, #ff813f 0%, #ffdd00 100%)', border: 'none', - padding: '6px 12px', + padding: '8px 14px', borderRadius: '4px', color: '#000', fontSize: '13px', @@ -115,7 +116,7 @@ export const Header = ({ style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border-color)', - padding: '6px 12px', + padding: '8px 14px', borderRadius: '4px', color: 'var(--text-secondary)', fontSize: '13px', @@ -129,7 +130,7 @@ export const Header = ({ style={{ background: isFullscreen ? 'rgba(0, 255, 136, 0.15)' : 'var(--bg-tertiary)', border: `1px solid ${isFullscreen ? 'var(--accent-green)' : 'var(--border-color)'}`, - padding: '6px 12px', + padding: '8px 14px', borderRadius: '4px', color: isFullscreen ? 'var(--accent-green)' : 'var(--text-secondary)', fontSize: '13px', diff --git a/src/hooks/useDXCluster.js b/src/hooks/useDXCluster.js index 0579879..4c4e4c4 100644 --- a/src/hooks/useDXCluster.js +++ b/src/hooks/useDXCluster.js @@ -10,7 +10,9 @@ export const useDXCluster = (source = 'auto', filters = {}) => { const [data, setData] = useState([]); // Filtered spots for display const [loading, setLoading] = useState(true); const [activeSource, setActiveSource] = useState(''); - const spotRetentionMs = 30 * 60 * 1000; // 30 minutes + + // Get retention time from filters, default to 30 minutes + const spotRetentionMs = (filters?.spotRetentionMinutes || 30) * 60 * 1000; const pollInterval = 5000; // 5 seconds // Apply filters to spots @@ -126,7 +128,15 @@ export const useDXCluster = (source = 'auto', filters = {}) => { fetchData(); const interval = setInterval(fetchData, pollInterval); return () => clearInterval(interval); - }, [source]); + }, [source, spotRetentionMs]); + + // Clean up spots immediately when retention time changes + useEffect(() => { + setAllSpots(prev => { + const now = Date.now(); + return prev.filter(s => (now - (s.timestamp || now)) < spotRetentionMs); + }); + }, [spotRetentionMs]); // Apply filters whenever allSpots or filters change useEffect(() => {