[Feature] Setting to configure status bar Next Scene button text

[estruyf]

Is your feature request related to a problem? Please describe.
Currently, the status bar "next scene" button displays the actual next scene name. Depending on the scene, this can sometimes lead to irregular button width, causing the status bar to "jump" as the label size changes. A user mentioned that always displaying just the word next would be more useful to them, as it avoids the jumping effect and maintains consistent UI appearance.

Describe the solution you'd like
Introduce a new setting to control the text displayed on the status bar next scene button. This setting should allow users to configure whether the button:

• Shows the next scene title (current behavior)
• Always shows the word next (or a custom string set by the user)

Describe alternatives you've considered
Alternatives considered include only providing the next option, but providing a setting allows for more flexibility based on user preference.

Additional context
This feature is based on user feedback preferring a static button label to avoid UI jumping effects when the scene name changes in length.

[estruyf]

@coderabbitai plan

[coderabbitai]

Coding Plan

Approach

Add a new configuration setting that allows users to customize the status bar "next scene" button text, enabling them to display a static string (like "Next") instead of the dynamic scene title to prevent UI width jumping when scene names vary in length.

Observations

The VSCode extension uses a standard configuration pattern where settings are defined in package.json under contributes.configuration.properties, with corresponding key constants organized in packages/common/src/Config.ts. Settings are accessed via the Extension singleton service using getSetting<T>(key). The status bar is managed by DemoStatusBar.ts, which creates multiple status bar items including the "next scene" button. The button text is currently set directly to the scene's title in the update() method at line 198.

Assumptions

Assumption 1: Setting Design: String vs Boolean vs Enum

Options Considered:

1. Boolean setting (true = show title, false = show "Next")
2. String setting (empty = show title, non-empty = use as custom text)
3. Enum with predefined options plus custom

Chosen Option: 2

Rationale: A string setting provides maximum flexibility - users can keep default behavior with an empty value or set any custom text they prefer (e.g., "Next", "→", "Continue"), directly matching the ticket's request for user-configurable custom strings.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Add Next Button Text Configuration Setting

This phase introduces the new setting across the configuration system and implements the logic to apply it in the status bar. All changes relate to the same feature and should be implemented together to maintain consistency.

Task 1: Define the Configuration Setting

Add the new setting to the VSCode extension configuration schema.

• Add demoTime.nextButtonText property to apps/vscode-extension/package.json under contributes.configuration.properties
• Set type as string with default value of empty string ""
• Include a descriptive explanation that empty value shows the scene title (current behavior), while any non-empty value will be displayed as static button text
• Place the setting near related status bar settings like showClock and timer for logical grouping

Task 2: Add Setting Key Constant

Register the setting key in the centralized configuration constants.

• Update packages/common/src/Config.ts to add the new setting key
• Add under a statusBar category object for organizational clarity (e.g., Config.statusBar.nextButtonText)
• The key value should match the setting name suffix: 'nextButtonText'

Task 3: Update DemoStatusBar to Apply Setting

Modify the status bar update logic to respect the new configuration setting.

• In apps/vscode-extension/src/services/DemoStatusBar.ts, locate the update() method where button text is set (around line 198)
• Before setting the text, retrieve the setting value using Extension.getInstance().getSetting<string>(Config.statusBar.nextButtonText)
• Apply conditional logic: if the setting has a non-empty value, use it as the button text; otherwise fall back to nextDemo.title (preserving current behavior)
• Keep the tooltip unchanged - it should continue showing the actual scene information (nextDemo.description or Next demo: ${nextDemo.title}) regardless of the button text, providing users context about what's actually next

🤖 Prompt for AI agents

Implement the new `nextButtonText` configuration setting that allows users to
customize the status bar next scene button text with a static string instead of
the dynamic scene title.

**Task 1: Define Configuration Setting in package.json**
- In `apps/vscode-extension/package.json`, add `demoTime.nextButtonText`
property under `contributes.configuration.properties`
- Configure as type `string` with default value of empty string `""`
- Add description explaining that empty value displays the scene title (current
behavior), while non-empty value shows static custom text
- Position near related status bar settings like `showClock` and `timer`

**Task 2: Register Setting Key Constant**
- In `packages/common/src/Config.ts`, add the new setting key constant
- Add under a `statusBar` category object (e.g.,
`Config.statusBar.nextButtonText`)
- Set key value to `'nextButtonText'` to match the setting name suffix

**Task 3: Apply Setting in Status Bar**
- In `apps/vscode-extension/src/services/DemoStatusBar.ts`, modify the
`update()` method around line 198
- Retrieve setting value using
`Extension.getInstance().getSetting<string>(Config.statusBar.nextButtonText)`
- Implement conditional logic:
  - If setting value is non-empty, use it as the button text
  - If empty, fall back to `nextDemo.title` (preserves current behavior)
- Keep tooltip unchanged - continue showing actual scene information
(`nextDemo.description` or `Next demo: ${nextDemo.title}`) to provide context
regardless of button text

---

🚀 Next Steps

🤖 All AI agent prompts combined

Implement the new `nextButtonText` configuration setting that allows users to
customize the status bar next scene button text with a static string instead of
the dynamic scene title.

**Task 1: Define Configuration Setting in package.json**
- In `apps/vscode-extension/package.json`, add `demoTime.nextButtonText`
property under `contributes.configuration.properties`
- Configure as type `string` with default value of empty string `""`
- Add description explaining that empty value displays the scene title (current
behavior), while non-empty value shows static custom text
- Position near related status bar settings like `showClock` and `timer`

**Task 2: Register Setting Key Constant**
- In `packages/common/src/Config.ts`, add the new setting key constant
- Add under a `statusBar` category object (e.g.,
`Config.statusBar.nextButtonText`)
- Set key value to `'nextButtonText'` to match the setting name suffix

**Task 3: Apply Setting in Status Bar**
- In `apps/vscode-extension/src/services/DemoStatusBar.ts`, modify the
`update()` method around line 198
- Retrieve setting value using
`Extension.getInstance().getSetting<string>(Config.statusBar.nextButtonText)`
- Implement conditional logic:
  - If setting value is non-empty, use it as the button text
  - If empty, fall back to `nextDemo.title` (preserves current behavior)
- Keep tooltip unchanged - continue showing actual scene information
(`nextDemo.description` or `Next demo: ${nextDemo.title}`) to provide context
regardless of button text

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!