style: dim Background Sound chooser hint

Author: txchen

src/vue-tui/component.ts

@@ -666,6 +666,13 @@ function backgroundView(snapshot: PublicationSnapshot, noColor: boolean) {
     bold: index === selected,
     color: index === selected && !noColor ? "cyan" : undefined,
   }, () => `${index === selected ? "› " : "  "}${label.padEnd(20)}${value}`);
+  const soundRow = (sound: string) => h(Box, { flexDirection: "row" }, () => [
+    h(Text, {
+      bold: selected === 1,
+      color: selected === 1 && !noColor ? "cyan" : undefined,
+    }, () => `${selected === 1 ? "› " : "  "}${"Sound".padEnd(20)}${sound}`),
+    h(Text, { dimColor: true }, () => " · Press Enter to choose"),
+  ]);
   if (state.status === "hidden") return null;
   if (state.status === "candidate" || state.status === "probing") {
     return h(Box, { flexDirection: "column", flexGrow: 1, paddingX: 2, paddingY: 1 }, () => [
@@ -691,7 +698,7 @@ function backgroundView(snapshot: PublicationSnapshot, noColor: boolean) {
     h(Text, { bold: true }, () => "Background Sounds · macOS"),
     h(Text, () => ""),
     row(0, "Background Sounds", snapshotValue.enabled ? "● On" : "○ Off"),
-    row(1, "Sound", `${snapshotValue.sound.label} · Enter to choose`),
+    soundRow(snapshotValue.sound.label),
     row(2, "Volume", `[${"■".repeat(filled)}${"·".repeat(10 - filled)}] ${snapshotValue.volumePercent}%${pendingVolume === null ? "" : ` → ${pendingVolume}% pending`}`),
     h(Text, { dimColor: true }, () => `  ${"State".padEnd(20)}${busy ? "Refreshing from macOS…" : stale ? "Stale · press u to retry" : "Confirmed from macOS"}`),
     stale ? h(Text, { color: noColor ? undefined : "red" }, () => state.error) : null,

tests/vue-tui.test.ts

@@ -55,7 +55,7 @@ describe("TMU top-level surface smoke", () => {
     await terminal.stdin.write("u");
     await sleep(0);
     expect(terminal.lastFrame()).toContain("Background Sounds   ● On");
-    expect(terminal.lastFrame()).toContain("Sound               Rain · Enter to choose");
+    expect(terminal.lastFrame()).toContain("Sound               Rain · Press Enter to choose");
     expect(terminal.lastFrame()).toContain("60%");
     expect(terminal.lastFrame()).toContain("Confirmed from macOS");
     await terminal.stdin.write("?");
@@ -98,7 +98,7 @@ describe("TMU top-level surface smoke", () => {
     const frame = terminal.lastFrame()!;
     expect(frame).toContain("Background Sounds · macOS");
     expect(frame).toContain("Background Sounds   ○ Off");
-    expect(frame).toContain("Sound               Rain · Enter to choose");
+    expect(frame).toContain("Sound               Rain · Press Enter to choose");
     expect(frame).toContain("Confirmed from macOS");
     expect(frame.split("\n").every((line) => Array.from(line).length <= columns)).toBe(true);
   });
@@ -135,7 +135,7 @@ describe("TMU top-level surface smoke", () => {
     await terminal.stdin.write("\r");
 
     expect(writes).toEqual(["sound-16"]);
-    expect(terminal.lastFrame()).toContain("Sound 16 · Enter to choose");
+    expect(terminal.lastFrame()).toContain("Sound 16 · Press Enter to choose");
   });
 
   test("scrolls the one-column picker when terminal height cannot show all 16 sounds", async () => {
@@ -227,7 +227,7 @@ describe("TMU top-level surface smoke", () => {
 
     expect(writes).toEqual(["enabled:true", "sound:Ocean", "volume:50"]);
     expect(terminal.lastFrame()).toContain("● On");
-    expect(terminal.lastFrame()).toContain("Ocean · Enter to choose");
+    expect(terminal.lastFrame()).toContain("Ocean · Press Enter to choose");
     expect(terminal.lastFrame()).toContain("50%");
     expect(coordinator.uiState.background.selectedRow).toBe(2);
     await terminal.stdin.write("k");