[Feature/satellite] styling visibility - other updates

[MichaelWheeley]

What does this PR do?

• introduces station altitude and minimum elevation boxes in the satellite settings. Altitude used in calculations. Minimum elevation used rather than zero degrees to determine visibility of satellite
• changes satellite details to highlight sections satellite location, tracking/visibility, satellite miscellaneous
• highlights tracking details when satellite is visible

reference #855

(miscellaneous tle1, tle2 passed - will use them in next iteration)

Type of change

• Bug fix
• New feature
• Performance improvement
• Refactor / code cleanup
• Documentation
• Translation
• Map layer plugin

How to test

Checklist

• App loads without console errors
• Tested in Dark, Light, and Retro themes
• Responsive at different screen sizes (desktop + mobile)
• If touching server.js: caches have TTLs and size caps (we serve 2,000+ concurrent users)
• If adding an API route: includes caching and error handling
• If adding a panel: wired into Modern, Classic, and Dockable layouts
• No hardcoded colors — uses CSS variables (var(--accent-cyan), etc.)
• No .bak, .old, console.log debug lines, or test scripts included

Screenshots (if visual change)

station altitude and minimum elevation boxes

not visible

satellite above 0deg but below minimum threshold to be considered visible (I have it set to 5.1deg)

satellite visible, elevation shown as 5deg however internally it is greater than or equal to 5.1deg. Tried it but displaying decimal degrees here doesn't look good. I could have made the minimum elevation setting an integer but was happy with this arrangement.

[accius]

Nice feature — station altitude and min elevation are solid additions for sat tracking. A few things to address before merge:

Must fix

Broken HTML in satellite card — The 3 inner <table> elements are nested directly inside the outer <table> without proper <tr><td> wrapping. This is invalid HTML and will render inconsistently across browsers. Either close the outer table before starting the sections, or wrap each inner table in <tr><td colspan="2">.

Duplicate style attribute on position table:

<table style="background-color: #302115; width:100%; font-size:11px; style="color: #888; padding:2px 0;"">

Second style= is ignored — the color: #888 never applies.

valueAsNumber with ?? — e.target.valueAsNumber returns NaN when empty, not null/undefined, so ?? 100 won't catch it. NaN will propagate to the saved config. Use || 100 or an explicit isNaN check instead.

Hardcoded background colors (#302115, #233b46, #00f800, #252e17) — these will look wrong in Light and Retro themes. Should use CSS variables or at least rgba() with low opacity over the existing background.

Should fix

minElev default mismatch — SettingsPanel defaults to 5.0 but useSatelliteLayer.js uses config?.satellite?.minElev || 0. A user who hasn't opened settings will see different visibility behavior between the layer and the hook.

Negative min elevation allowed — The input allows -89 which would mark a satellite as "visible" when below the horizon. Should probably clamp to 0–89.

Nit

Squash the merge commits on merge — 13 commits (4 are merge syncs) is noisy for the history.

[MichaelWheeley]

Must fix

Broken HTML in satellite card — The 3 inner <table> elements are nested directly inside the outer <table> without proper <tr><td> wrapping. This is invalid HTML and will render inconsistently across browsers. Either close the outer table before starting the sections, or wrap each inner table in <tr><td colspan="2">.

Handled by removal of inner tables with additional styling on elements.

Duplicate style attribute on position table:

<table style="background-color: #302115; width:100%; font-size:11px; style="color: #888; padding:2px 0;"">

Second style= is ignored — the color: #888 never applies.

fixed duplicate style property

valueAsNumber with ?? — e.target.valueAsNumber returns NaN when empty, not null/undefined, so ?? 100 won't catch it. NaN will propagate to the saved config. Use || 100 or an explicit isNaN check instead.

replaced ?? with || incase of NaN

Hardcoded background colors (#302115, #233b46, #00f800, #252e17) — these will look wrong in Light and Retro themes. Should use CSS variables or at least rgba() with low opacity over the existing background.

removed all # hardcoded colors, replaced with rgba(), modify opacity on selected colors

Should fix

minElev default mismatch — SettingsPanel defaults to 5.0 but useSatelliteLayer.js uses config?.satellite?.minElev || 0. A user who hasn't opened settings will see different visibility behavior between the layer and the hook.

minElev consistency default to 5.0

Negative min elevation allowed — The input allows -89 which would mark a satellite as "visible" when below the horizon. Should probably clamp to 0–89.

Restricted minElev to -5 to 89 allowing for marginal below the horizon setting.
There was also a problem in the onChange functionality when the value was zero - which was getting set to 5. Fixed with isNaN().

[MichaelWheeley]

[accius]

Thanks for the updates Michael — good progress. A few things still need fixing before this can merge:

Must fix

Corrupted color strings

The hex-to-rgba find-and-replace left trailing characters on two lines in useSatelliteLayer.js:

color: 'rgba(255, 255, 255, 1)fff',   // ~line 379 — trailing "fff"
color: 'rgba(255, 255, 255, 1)f00',   // ~line 408 — trailing "f00"

The first should be 'rgba(255, 255, 255, 1)'. The second was originally #ffff00 (yellow for lead track) — should be 'rgba(255, 255, 0, 1)', not white.

stationAlt onChange still uses ??

You fixed minElev to use isNaN() but stationAlt still has:

onChange={(e) => setStationAlt(e.target.valueAsNumber ?? 100)}

valueAsNumber returns NaN when empty, not null/undefined, so ?? won't catch it. Should match the minElev pattern:

onChange={(e) => setStationAlt(isNaN(e.target.valueAsNumber) ? 100 : e.target.valueAsNumber)}

satelliteConfig not null-safe

In useSatellites.js, elevation >= satelliteConfig.minElev will throw if config.satellite is undefined (user hasn't opened settings yet). Needs a guard:

const isVisible = elevation >= (satelliteConfig?.minElev || 5.0);

Should fix

Lat/lon default changed from ?? to ||

The SettingsPanel lines for lat/lon were changed from config?.location?.lat ?? 0 to || 0. Since 0 is a valid coordinate, ?? was the correct operator — || treats 0 as falsy. It happens to work here because the fallback is also 0, but it's semantically wrong and could mask bugs if the default ever changes. Please revert to ??.

Hardcoded theme-unaware colors

Replacing #hex with rgba() equivalents doesn't solve the underlying theme issue — rgba(48, 33, 21, .8) and rgba(0, 248, 0, .5) are still dark-theme-only colors. I know inline HTML templates make CSS variables harder to use, but these section backgrounds will look off in Light and Retro. Could you at least use very low-opacity neutrals (e.g. rgba(255,255,255,0.05) / rgba(0,0,0,0.1)) that work across themes, or pass theme-aware colors from the component?

[MichaelWheeley]

thank-you for your patience !

Must fix

Corrupted color strings

The hex-to-rgba find-and-replace left trailing characters on two lines in useSatelliteLayer.js:

color: 'rgba(255, 255, 255, 1)fff',   // ~line 379 — trailing "fff"
color: 'rgba(255, 255, 255, 1)f00',   // ~line 408 — trailing "f00"

The first should be 'rgba(255, 255, 255, 1)'. The second was originally #ffff00 (yellow for lead track) — should be 'rgba(255, 255, 0, 1)', not white.

done

stationAlt onChange still uses ??

You fixed minElev to use isNaN() but stationAlt still has:

onChange={(e) => setStationAlt(e.target.valueAsNumber ?? 100)}

valueAsNumber returns NaN when empty, not null/undefined, so ?? won't catch it. Should match the minElev pattern:

onChange={(e) => setStationAlt(isNaN(e.target.valueAsNumber) ? 100 : e.target.valueAsNumber)}

done

satelliteConfig not null-safe

In useSatellites.js, elevation >= satelliteConfig.minElev will throw if config.satellite is undefined (user hasn't opened settings yet). Needs a guard:

const isVisible = elevation >= (satelliteConfig?.minElev || 5.0);

done

Should fix

Lat/lon default changed from ?? to ||

The SettingsPanel lines for lat/lon were changed from config?.location?.lat ?? 0 to || 0. Since 0 is a valid coordinate, ?? was the correct operator — || treats 0 as falsy. It happens to work here because the fallback is also 0, but it's semantically wrong and could mask bugs if the default ever changes. Please revert to ??.

Is that also true for lat / lon / sationAlt / minElev since all have valid values of zero? updated four lines

Hardcoded theme-unaware colors

Replacing #hex with rgba() equivalents doesn't solve the underlying theme issue — rgba(48, 33, 21, .8) and rgba(0, 248, 0, .5) are still dark-theme-only colors. I know inline HTML templates make CSS variables harder to use, but these section backgrounds will look off in Light and Retro. Could you at least use very low-opacity neutrals (e.g. rgba(255,255,255,0.05) / rgba(0,0,0,0.1)) that work across themes, or pass theme-aware colors from the component?

If it's okay I'd like to split it into a separate task, I'd like to get the functionality checked-in and merged and then come back and address this. Please assign me to
#889

mrw.

[accius]

Review — Satellite styling + visibility

Nice additions: station altitude + minimum-elevation settings wired through to calculations are a good improvement and address #855.

Blockers / concerns:

1. ?? → || regression (SettingsPanel.jsx ~line 182-185):

   setLat(config.location?.lat || 0);
   setLon(config.location?.lon || 0);

   This treats a legitimate lat=0 (equator) or lon=0 (prime meridian) as falsy. The previous ?? was correct — please revert. Same applies to parseFloat(lat) || 0 on save.

2. Hardcoded colors in useSatelliteLayer.js: the PR checklist explicitly requires CSS variables. Converting #00ffff → rgba(0,255,255,1) is still a hardcoded color, and the new row background colors (rgba(48,33,21,.8), rgba(0,248,0,.5), rgba(37,46,23,.8), rgba(35,59,70,.8)) will not respect Dark/Light/Retro themes. Please move these to CSS variables (or at minimum theme-aware classes) so the popup works across themes.

3. Mixed concerns: this PR bundles a functional feature (altitude/minElev) with a significant cosmetic rewrite of the satellite popup HTML. Splitting into two PRs would make review much easier and keep bisects clean.

4. Inconsistent config nesting:

   • useSatellites.js receives satelliteConfig as a separate prop (satelliteConfig?.minElev)
   • useSatelliteLayer.js reads config?.satellite?.minElev off a combined config

   Please verify both call sites actually resolve — otherwise minElev silently defaults to 5.0 in one of the two paths.

5. Altitude default changed from 260m → 100m in useSatelliteLayer.js. Intentional? Worth a note if so.

6. No input bounds on stationAlt — accepts negative or absurdly large values.

7. Unused tle1/tle2 added to positions — the description notes these are for a future iteration. Recommend holding them until the iteration that uses them, to keep this PR tight.

Testing: checklist has theme testing unchecked — given the scope of color changes, please verify in Dark / Light / Retro before merge.

Overall direction is good — please address 1 (functional bug) and 2 (theme compliance) at minimum.

[MichaelWheeley]

1. ?? → || regression (SettingsPanel.jsx ~line 182-185):

   setLat(config.location?.lat || 0);
   setLon(config.location?.lon || 0);

   This treats a legitimate lat=0 (equator) or lon=0 (prime meridian) as falsy. The previous ?? was correct — please revert. Same applies to parseFloat(lat) || 0 on save.

Done, assume the case for lat / lon / stationAlt / minElev since all have valid values of zero.

2. Hardcoded colors in useSatelliteLayer.js: the PR checklist explicitly requires CSS variables. Converting #00ffff → rgba(0,255,255,1) is still a hardcoded color, and the new row background colors (rgba(48,33,21,.8), rgba(0,248,0,.5), rgba(37,46,23,.8), rgba(35,59,70,.8)) will not respect Dark/Light/Retro themes. Please move these to CSS variables (or at minimum theme-aware classes) so the popup works across themes.

See #889. I was trying to keep those changes out of this PR for clarity.... anyhow I ported them in manually with BeyondCompare.

3. Mixed concerns: this PR bundles a functional feature (altitude/minElev) with a significant cosmetic rewrite of the satellite popup HTML. Splitting into two PRs would make review much easier and keep bisects clean.

There's more changes coming that I've already deliberately kept out of here.

4. Inconsistent config nesting:

   • useSatellites.js receives satelliteConfig as a separate prop (satelliteConfig?.minElev)

   • useSatelliteLayer.js reads config?.satellite?.minElev off a combined config

   Please verify both call sites actually resolve — otherwise minElev silently defaults to 5.0 in one of the two paths.

Yes, both paths resolve correctly, did some temporary numerical checking with throws. I didn't want to modify the calling function for the plugins which is why satelliteConfig is derived from config rather than passed.

5. Altitude default changed from 260m → 100m in useSatelliteLayer.js. Intentional? Worth a note if so.

Already has a note // above sea level [km], stationAlt is [m], defaults to 100m,
but removing a legacy hard-coded default location of Horicon WI at 280m ASL possibly doesn't need to be explained in the code comments!

6. No input bounds on stationAlt — accepts negative or absurdly large values.

Limited [-500, 9000]m.

7. Unused tle1/tle2 added to positions — the description notes these are for a future iteration. Recommend holding them until the iteration that uses them, to keep this PR tight.

removed, to be added back in on the next PR.

Testing: checklist has theme testing unchecked — given the scope of color changes, please verify in Dark / Light / Retro before merge.

Done.