From 1fdce89dd5587c647b69b6970e8c75725eed3104 Mon Sep 17 00:00:00 2001
From: thepoy <thepoy@163.com>
Date: Tue, 20 Oct 2026 14:06:14 +0800
Subject: [PATCH] refactor(stage): lead random mode with the sun track

The track was a narrow card centred in a full-width stage, with its caption on the far left,
so it read as a floating island and looked unrelated to the text beside it. It now comes
first and fills the stage: as the day's own horizontal axis its azimuth labels spread out,
and the caption sits under the card it describes.

The two-line explanation moves beside the summary figures, at caption size, where it fills
space the figures already leave. The top band it used to occupy is gone, which is what the
collage gains.
---
 src/stage/RandomStage.tsx   | 29 ++++++++++++++---------------
 src/stage/RandomSunPath.tsx | 12 +++++++-----
 src/stage/SunPathPanel.tsx  | 10 +++++++++-
 3 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/stage/RandomStage.tsx b/src/stage/RandomStage.tsx
index cf7509e5..954cdbf2 100644
--- a/src/stage/RandomStage.tsx
+++ b/src/stage/RandomStage.tsx
@@ -1,8 +1,9 @@
-// Responsibility: Random-mode stage orchestration — intro + pool status + summary + select all / clear all + collage or empty state. No sampling.
+// Responsibility: Random-mode stage orchestration — today's sun track, pool status, summary + select all /
+//       clear all, then the collage or the empty state. No sampling.
 import { randomStore, selectAll, clearAll } from "@/store/random.store";
 import { availableThemeIds } from "@/store/catalog.selectors";
 import { t } from "@/i18n";
-import { createMemo } from "solid-js";
+import { createMemo, Show } from "solid-js";
 import { WriteNote } from "./WriteNote";
 import { RandomStats } from "./RandomStats";
 import { RandomSunPath } from "./RandomSunPath";
@@ -17,12 +18,19 @@ export function RandomStage() {
 
   return (
     <>
-      <p class="max-w-145 font-display text-[15px] font-semibold leading-relaxed text-foreground">
-        {t("stage.randomIntro")}
-      </p>
+      {/* The track leads: it is the only part of this stage that moves during the day. An
+          empty pool has nothing drawn, so it stays out of the way then. */}
+      <Show when={poolSize() > 0}>
+        <RandomSunPath />
+      </Show>
       <WriteNote />
       <div class="flex flex-wrap items-center gap-x-5 gap-y-2">
         <RandomStats />
+        {/* The explanation sits in the space the figures leave, at caption size: it is a
+            note about the mode, not a heading over the stage. */}
+        <p class="min-w-0 max-w-120 flex-1 text-[11.5px] leading-relaxed text-muted-foreground">
+          {t("stage.randomIntro")}
+        </p>
         <div class="ml-auto flex items-center gap-4 text-[12px]">
           <button
             type="button"
@@ -42,16 +50,7 @@ export function RandomStage() {
           </button>
         </div>
       </div>
-      {poolSize() === 0 ? (
-        <PoolEmpty />
-      ) : (
-        <>
-          {/* The pool area reports rather than asks, so the track sits with it: it belongs
-              to the theme drawn for today, not to the whole pool. */}
-          <RandomSunPath />
-          <PoolCollage />
-        </>
-      )}
+      {poolSize() === 0 ? <PoolEmpty /> : <PoolCollage />}
       <RandomCommitRow />
     </>
   );
diff --git a/src/stage/RandomSunPath.tsx b/src/stage/RandomSunPath.tsx
index bfb45045..2808547f 100644
--- a/src/stage/RandomSunPath.tsx
+++ b/src/stage/RandomSunPath.tsx
@@ -55,6 +55,13 @@ export function RandomSunPath() {
     <Show when={list().length > 0 && current()}>
       {(cur) => (
         <div class="flex flex-col gap-1.5">
+          <SunPathPanel
+            wallpapers={list()}
+            current={cur()}
+            matchedEntry={matchedEntry() ?? null}
+            fullWidth
+          />
+          {/* Below the track, and quiet: it names the theme, it is not a heading. */}
           <div class="flex items-center gap-1.5 font-mono text-[10.5px] text-muted-foreground">
             <span class="size-1.5 shrink-0 rounded-full bg-success" />
             <span class="truncate">
@@ -63,11 +70,6 @@ export function RandomSunPath() {
               })}
             </span>
           </div>
-          <SunPathPanel
-            wallpapers={list()}
-            current={cur()}
-            matchedEntry={matchedEntry() ?? null}
-          />
         </div>
       )}
     </Show>
diff --git a/src/stage/SunPathPanel.tsx b/src/stage/SunPathPanel.tsx
index ad8696a9..3c93c444 100644
--- a/src/stage/SunPathPanel.tsx
+++ b/src/stage/SunPathPanel.tsx
@@ -31,6 +31,12 @@ interface Props {
   /** Entry the user picked; omit it, and `onSelect`, for a track that only reports. */
   selIndex?: number | null;
   onSelect?: (index: number | null) => void;
+  /**
+   * Fill the column instead of the fixed-mode card width. The random-mode stage is as wide as
+   * the window, and a narrow track centred in it reads as a floating island; there the track
+   * also becomes the day's own horizontal axis, so the azimuth labels spread out.
+   */
+  fullWidth?: boolean;
 }
 
 export function SunPathPanel(props: Props) {
@@ -78,7 +84,9 @@ export function SunPathPanel(props: Props) {
   );
 
   return (
-    <div class="mx-auto w-full max-w-155 shrink-0">
+    <div
+      class={clsx("w-full shrink-0", !props.fullWidth && "mx-auto max-w-155")}
+    >
       <div class="relative h-28 shrink-0 overflow-hidden rounded-xl border border-border bg-card shadow-[0_1px_2px_rgba(0,0,0,.05),0_6px_18px_rgba(0,0,0,.06)]">
         <div
           class={clsx(