From a7070d71c4c38fb703d2a617dd0fdf5f79858859 Mon Sep 17 00:00:00 2001
From: thepoy <thepoy@163.com>
Date: Tue, 20 Oct 2026 14:19:34 +0800
Subject: [PATCH] fix(stage): reveal the sun readout on hover, not permanently

The strip sat at the top right of the track and overlapped the sun
marker whenever the sun
was in the western sky. It now appears while the marker is hovered, with
the numbers also in
the marker's title so keyboard and screen-reader users lose nothing.

The marker gains a 20px hit area around its 10px dot, since pointing at
the dot was the only
way to reach the readout.
---
 src/stage/SunPathPanel.tsx | 45 +++++++++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/stage/SunPathPanel.tsx b/src/stage/SunPathPanel.tsx
index 3c93c444..8c68d52e 100644
--- a/src/stage/SunPathPanel.tsx
+++ b/src/stage/SunPathPanel.tsx
@@ -41,6 +41,7 @@ interface Props {
 
 export function SunPathPanel(props: Props) {
   const [hover, setHover] = createSignal<number | null>(null);
+  const [hoverSun, setHoverSun] = createSignal(false);
   /** A track without a selector reports the frames; it does not choose them. */
   const interactive = () => props.onSelect !== undefined;
 
@@ -210,15 +211,25 @@ export function SunPathPanel(props: Props) {
           }}
         </For>
 
+        {/* The sun: a 20px hit area around a 10px dot, because the dot alone is a hard thing
+            to point at — and pointing at it is what reveals the readout below. */}
         <div
           style={{ left: `${cx()}%`, top: `${cy()}%` }}
-          class={clsx(
-            "absolute size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-card",
-            props.current.altitude < 0
-              ? "bg-muted-foreground shadow-[0_0_6px_var(--muted-foreground)]"
-              : "bg-warning shadow-[0_0_8px_var(--warning)]",
-          )}
-        />
+          class="absolute flex size-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center"
+          onMouseEnter={() => setHoverSun(true)}
+          onMouseLeave={() => setHoverSun(false)}
+          title={`${t("stage.altitude")} ${formatAngle(props.current.altitude)}° · ${t("stage.azimuth")} ${formatAngle(props.current.azimuth)}°`}
+        >
+          <div
+            class={clsx(
+              "size-2.5 rounded-full ring-2 ring-card transition-transform",
+              hoverSun() && "scale-125",
+              props.current.altitude < 0
+                ? "bg-muted-foreground shadow-[0_0_6px_var(--muted-foreground)]"
+                : "bg-warning shadow-[0_0_8px_var(--warning)]",
+            )}
+          />
+        </div>
 
         {/* Horizon label: sits in the empty middle band (the track hangs high here, no path crosses it) */}
         <span
@@ -248,15 +259,19 @@ export function SunPathPanel(props: Props) {
             {m.label}
           </span>
         ))}
-        <span class="absolute right-2 top-1.5 flex items-center gap-1 whitespace-nowrap rounded bg-card/75 px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground backdrop-blur-sm">
-          <span class={props.current.altitude < 0 ? "" : "text-warning"}>
-            {props.current.altitude < 0 ? "☾" : "☀"}
+        {/* Hovering the sun reveals the readout, so it is not a permanent label sitting on
+            top of the marker it describes. */}
+        <Show when={hoverSun()}>
+          <span class="pointer-events-none absolute right-2 top-1.5 flex items-center gap-1 whitespace-nowrap rounded bg-card/85 px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground shadow-[0_2px_8px_rgba(0,0,0,.12)] backdrop-blur-sm">
+            <span class={props.current.altitude < 0 ? "" : "text-warning"}>
+              {props.current.altitude < 0 ? "☾" : "☀"}
+            </span>
+            <span class="text-foreground">
+              {props.current.altitude.toFixed(1)}° ·{" "}
+              {props.current.azimuth.toFixed(1)}°
+            </span>
           </span>
-          <span class="text-foreground">
-            {props.current.altitude.toFixed(1)}° ·{" "}
-            {props.current.azimuth.toFixed(1)}°
-          </span>
-        </span>
+        </Show>
       </div>
     </div>
   );