From 8213c5dc278912b789ae9beff1cb93cc3991555b Mon Sep 17 00:00:00 2001
From: thepoy <thepoy@163.com>
Date: Tue, 20 Oct 2026 12:33:55 +0800
Subject: [PATCH] refactor(stage): let the sun path be shown without a
 selection

The random-mode stage has nothing to pick - it reports the theme it drew for the day - so the
panel's selector becomes optional before it can be reused there. Without `onSelect` the
markers render as spans instead of buttons, which keeps them out of the tab order as well.
---
 src/stage/SunPathPanel.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/stage/SunPathPanel.tsx b/src/stage/SunPathPanel.tsx
index 5dedb20c..ad8696a9 100644
--- a/src/stage/SunPathPanel.tsx
+++ b/src/stage/SunPathPanel.tsx
@@ -6,6 +6,7 @@ import { t } from "@/i18n";
 import { settingsStore } from "@/store/settings.store";
 import { clsx, formatAngle } from "@/utils";
 import { createMemo, createResource, createSignal, For, Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
 import { themeStore } from "~/store/theme.store";
 import {
   type AltitudeDomain,
@@ -27,12 +28,15 @@ interface Props {
   current: SolarPosition;
   /** Position of the matched solar-angle entry within the array (not the image index) */
   matchedEntry: number | null;
-  selIndex: number | null;
-  onSelect: (index: number | null) => void;
+  /** Entry the user picked; omit it, and `onSelect`, for a track that only reports. */
+  selIndex?: number | null;
+  onSelect?: (index: number | null) => void;
 }
 
 export function SunPathPanel(props: Props) {
   const [hover, setHover] = createSignal<number | null>(null);
+  /** A track without a selector reports the frames; it does not choose them. */
+  const interactive = () => props.onSelect !== undefined;
 
   // Real sun path: recomputed as the observer's position changes (today's date).
   const [path] = createResource(
@@ -171,10 +175,15 @@ export function SunPathPanel(props: Props) {
               mat = createMemo(() => i() === props.matchedEntry),
               hov = createMemo(() => i() === hover());
             return (
-              <button
-                type="button"
+              // A marker is a button only when a selection would mean something; the
+              // read-only track renders the same dot as a span, so it is not focusable.
+              <Dynamic
+                component={interactive() ? "button" : "span"}
+                {...(interactive() ? { type: "button" as const } : {})}
                 title={`${t("stage.altitude")} ${formatAngle(wp.solar.altitude)}° · ${t("stage.azimuth")} ${formatAngle(wp.solar.azimuth)}°`}
-                onClick={() => props.onSelect(wp.index)}
+                onClick={
+                  props.onSelect ? () => props.onSelect?.(wp.index) : undefined
+                }
                 onMouseEnter={() => setHover(i())}
                 onMouseLeave={() => setHover(null)}
                 style={{