{
+ if (!menuOpen) return;
+
+ const handleKeyDown = (event) => {
+ if (event.key === 'Escape') {
+ closeMenu();
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ }, [menuOpen, closeMenu]);
+
+ if (!menuOpen) return null;
+
+ return (
+
+
e.stopPropagation()}
+ style={{
+ position: 'absolute',
+ right: '0',
+ top: '0',
+ margin: '3em',
+ padding: '1em',
+ }}
+ >
+
+
+
+
+ window.dispatchEvent(new Event('openhamclock-show-whatsnew'))}>
+ v{config.version} ℹ️
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/menus/AppMenuButtons.jsx b/src/components/menus/AppMenuButtons.jsx
new file mode 100644
index 00000000..23cb0ef4
--- /dev/null
+++ b/src/components/menus/AppMenuButtons.jsx
@@ -0,0 +1,35 @@
+import DonateButton from '../DonateButton';
+import { IconGear, IconExpand, IconShrink } from '../Icons';
+
+export default function AppMenuButtons({
+ config,
+ showUpdateButton,
+ updateInProgress,
+ onUpdateClick,
+ onSettingsClick,
+ onFullscreenToggle,
+ isFullscreen,
+ className = 'menu-button-container',
+}) {
+ return (
+
+
+
+ {showUpdateButton && (
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/src/components/menus/MenuToggleButton.jsx b/src/components/menus/MenuToggleButton.jsx
new file mode 100644
index 00000000..e2b74a93
--- /dev/null
+++ b/src/components/menus/MenuToggleButton.jsx
@@ -0,0 +1,11 @@
+import { useAppMenu } from '../../contexts/AppMenuContext';
+
+export default function MenuToggleButton() {
+ const { openMenu } = useAppMenu();
+
+ return (
+
+ );
+}
diff --git a/src/contexts/AppMenuContext.jsx b/src/contexts/AppMenuContext.jsx
new file mode 100644
index 00000000..b1e35fd4
--- /dev/null
+++ b/src/contexts/AppMenuContext.jsx
@@ -0,0 +1,14 @@
+import { createContext, useContext, useState, useCallback } from 'react';
+
+const AppMenuContext = createContext();
+
+export const useAppMenu = () => useContext(AppMenuContext);
+
+export const AppMenuProvider = ({ children }) => {
+ const [menuOpen, setMenuOpen] = useState(false);
+
+ const openMenu = useCallback(() => setMenuOpen(true), []);
+ const closeMenu = useCallback(() => setMenuOpen(false), []);
+
+ return
{children};
+};
diff --git a/src/layouts/ClassicLayout.jsx b/src/layouts/ClassicLayout.jsx
index 0f266045..079f1978 100644
--- a/src/layouts/ClassicLayout.jsx
+++ b/src/layouts/ClassicLayout.jsx
@@ -1,12 +1,16 @@
/**
* Classic HamClock-style layout
*/
+import { useState, useEffect, useCallback } from 'react';
import { DXNewsTicker, WorldMap } from '../components';
import { DXGridInput } from '../components/DXGridInput.jsx';
import { getBandColor, getBandColorForBand } from '../utils';
import CallsignLink from '../components/CallsignLink.jsx';
import DonateButton from '../components/DonateButton.jsx';
import { useRig } from '../contexts/RigContext.jsx';
+import useLocalInstall from '../hooks/app/useLocalInstall.js';
+import { IconGear, IconExpand, IconShrink } from '../components/Icons.jsx';
+import MenuToggleButton from '../components/menus/MenuToggleButton';
export default function ClassicLayout(props) {
const {
@@ -22,6 +26,8 @@ export default function ClassicLayout(props) {
handleFullscreenToggle,
isFullscreen,
setShowSettings,
+ handleUpdateClick,
+ updateInProgress,
dxClusterData,
hoveredSpot,
setHoveredSpot,
@@ -57,6 +63,8 @@ export default function ClassicLayout(props) {
toggleSatellites,
} = props;
+ const showUpdateButton = useLocalInstall();
+
const liveSpotBands = ['160m', '80m', '60m', '40m', '30m', '20m', '17m', '15m', '12m', '10m', '8m', '6m', '4m'];
const mapLegendBands = ['160', '80', '40', '30', '20', '17', '15', '12', '10', '8', '6', '4'];
@@ -85,7 +93,6 @@ export default function ClassicLayout(props) {
style={{
display: 'grid',
gridTemplateColumns: '280px 1fr 300px',
- height: '130px',
borderBottom: '2px solid #333',
background: '#000',
}}
@@ -545,193 +552,179 @@ export default function ClassicLayout(props) {
background: 'var(--bg-panel)',
borderBottom: '1px solid var(--border-color)',
padding: '6px 12px',
- height: '52px',
flexShrink: 0,
gap: '10px',
+ marginBottom: '6px',
}}
>
- {/* Callsign */}
-
setShowSettings(true)}
- title={t('app.settings.title')}
- >
- {config.callsign}
-
-
- {/* UTC */}
+ {/* Callsign */}
- {t('app.time.utc')}
-
- setShowSettings(true)}
+ title={t('app.settings.title')}
>
- {utcTime}
+ {config.callsign}
-
- {/* Local */}
-
-
- {t('app.time.locShort')}
-
-
+ {t('app.time.utc')}
+
+
+ {utcTime}
+
+
+
+ {/* Local */}
+
- {localTime}
-
-
-
- {/* Solar Quick Stats */}
-
-
- {t('app.solar.sfiShort')}
-
- {solarIndices?.data?.sfi?.current || spaceWeather?.data?.solarFlux || '--'}
+
+ {t('app.time.locShort')}
-
-
- {t('app.solar.kpShort')}
= 4
- ? 'var(--accent-red)'
- : 'var(--accent-green)',
+ fontSize: '24px',
fontWeight: '700',
+ color: 'var(--accent-amber)',
}}
>
- {solarIndices?.data?.kp?.current ?? spaceWeather?.data?.kIndex ?? '--'}
+ {localTime}
-
-
- {t('app.solar.ssnShort')}
-
- {solarIndices?.data?.ssn?.current ?? '--'}
+
+
+ {/* Solar Quick Stats */}
+
+
+ {t('app.solar.sfiShort')}
+
+ {solarIndices?.data?.sfi?.current || spaceWeather?.data?.solarFlux || '--'}
+
-
- {bandConditions?.extras?.aIndex && (
- A
+ {t('app.solar.kpShort')}
= 20
+ parseInt(solarIndices?.data?.kp?.current ?? spaceWeather?.data?.kIndex) >= 4
? 'var(--accent-red)'
- : parseInt(bandConditions.extras.aIndex) >= 10
- ? 'var(--accent-amber)'
- : 'var(--accent-green)',
+ : 'var(--accent-green)',
fontWeight: '700',
}}
>
- {bandConditions.extras.aIndex}
+ {solarIndices?.data?.kp?.current ?? spaceWeather?.data?.kIndex ?? '--'}
- )}
- {bandConditions?.extras?.geomagField && (
-
- {bandConditions.extras.geomagField}
+
+ {t('app.solar.ssnShort')}
+
+ {solarIndices?.data?.ssn?.current ?? '--'}
+
- )}
+ {bandConditions?.extras?.aIndex && (
+
+ A
+ = 20
+ ? 'var(--accent-red)'
+ : parseInt(bandConditions.extras.aIndex) >= 10
+ ? 'var(--accent-amber)'
+ : 'var(--accent-green)',
+ fontWeight: '700',
+ }}
+ >
+ {bandConditions.extras.aIndex}
+
+
+ )}
+ {bandConditions?.extras?.geomagField && (
+
+ {bandConditions.extras.geomagField}
+
+ )}
+