Add reader speed dial and stabilize Learn surfaces (#24, #32, #34)

Author: KSemenenko

AGENTS.md

@@ -82,6 +82,7 @@ Rule format:
 - Public-facing screenshots and any screenshot-generating or screenshot-asserting tests must use English-visible content so README, docs, and release assets stay globally readable and consistent.
 - Public-facing screenshots that include camera or preview feeds must not ship mirrored or reversed readable text; choose or configure the capture so visible text reads correctly in the final asset.
 - Teleprompter reader text alignment must expose explicit left, center, and right modes, default to left alignment, and keep the left-aligned mode optically centered by offsetting the text mass away from a visibly left-heavy block.
+- Learn RSVP focus layout is a hard stability contract: the ORP focus letter, focus row, and next-phrase region must keep fixed screen positions and fixed reserved heights while words and phrase text change; next-phrase wrapping must clamp inside its reserved area instead of moving the focus word vertically.
 - Teleprompter `Read Width` must map honestly to the visible reading lane: at `100%` it must not keep extra internal container padding or shrink-to-content gutters that make the text block visibly narrower than the width guides.
 - The TPS editor migration to Monaco must be complete: syntax coloring, IntelliSense/autocomplete, hover or inline tooltip help, decorations, and TPS authoring feedback must be Monaco-native instead of split across legacy overlay or hidden-textarea behavior.
 - TPS authoring completeness must be checked against the upstream `managedcode/TPS` README, not only the currently shipped editor menus, so new editor support stays aligned with the full spec for emotions, delivery, pauses, speed, pronunciation, and related cues.
@@ -128,6 +129,7 @@ Rule format:
 - Editor top-toolbar search must remain visible in narrow layouts; when width runs out, the other toolbar groups should become explicitly horizontally scrollable/reachable before search is allowed to disappear.
 - Do not push branches or `main` without an explicit user command for that push; local commits are allowed, but network publish actions require clear approval in the current conversation.
 - Issue-driven implementation work must create or reference the GitHub issue first, mention the issue number in related commits, and leave issue closure to the user after their verification.
+- For feedback issue triage, treat issues assigned to `byskyphy` as implemented and waiting for user verification, and treat unassigned issues as not ready unless issue comments explicitly say otherwise; after the release containing an implemented issue ships, add a comment to that issue with the app version where it was added.
 - Feature or improvement issues must include UI acceptance coverage expectations, and implementation commits for those issues must add or update browser/UI tests unless the issue explicitly documents why UI coverage is not applicable.
 - Stakeholder feedback issues should be interpreted as additive feature or presentation requests by default; do not remove existing behavior from wording such as "replace", "remove", or "rename" unless the user explicitly confirms deletion.
 - When a CI test job fails, times out, or is cancelled, the workflow summary must still state which tests failed or that the run ended before per-test failure data was available; do not leave browser-suite failures represented only by generic job annotations.

src/PrompterOne.Shared/Contracts/UiDomIds.cs

@@ -69,6 +69,7 @@ public static class Learn
         public const string ContextLeft = "rsvp-ctx-l";
         public const string ContextRight = "rsvp-ctx-r";
         public const string NextPhrase = "rsvp-next-phrase";
+        public const string NotesBody = "rsvp-notes-body";
         public const string PauseFill = "rsvp-pause-fill";
         public const string ProgressLabel = "rsvp-progress-label";
         public const string ProgressFill = "rsvp-progress-fill";
@@ -91,6 +92,8 @@ public static class Teleprompter
         public const string FocalGuide = "rd-guide-h";
         public const string HeaderSegment = "rd-header-segment";
         public const string ProgressFill = "rd-progress-fill";
+        public const string SpeedDial = "rd-speed-dial";
+        public const string SpeedDialValue = "rd-speed-dial-val";
         public const string SpeedValue = "rd-speed-val";
         public const string Stage = "rd-stage";
         public const string Time = "rd-time";

src/PrompterOne.Shared/Contracts/UiTestIds.Learn.cs

@@ -18,6 +18,7 @@ public static class Learn
         public const string NotesSave = "learn-notes-save";
         public const string NotesSection = "learn-notes-section";
         public const string NotesTextarea = "learn-notes-textarea";
+        public const string NotesToggle = "learn-notes-toggle";
         public const string OrpLine = "learn-orp-line";
         public const string Page = "learn-page";
         public const string PauseIcon = "learn-pause-icon";

src/PrompterOne.Shared/Contracts/UiTestIds.Teleprompter.cs

@@ -54,6 +54,9 @@ public static class Teleprompter
         public const string SpeedCueDisplayMultiplier = "teleprompter-speed-cue-display-multiplier";
         public const string SpeedCueDisplayTooltipKey = "speed-cue-display";
         public const string SpeedCueDisplayWpm = "teleprompter-speed-cue-display-wpm";
+        public const string SpeedDial = "teleprompter-speed-dial";
+        public const string SpeedDialTooltipKey = "speed-dial";
+        public const string SpeedDialValue = "teleprompter-speed-dial-value";
         public const string SpeedUp = "teleprompter-speed-up";
         public const string SpeedValue = "teleprompter-speed-value";
         public const string Sliders = "teleprompter-sliders";

src/PrompterOne.Shared/Learn/Pages/LearnPage.PrepNotes.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using PrompterOne.Shared.Components;
 using PrompterOne.Shared.Learn.Services;
 using PrompterOne.Shared.Localization;
 
@@ -26,6 +27,16 @@ private sealed record LearnPrepNoteContext(
 
     private bool CanAddPrepNote => !string.IsNullOrWhiteSpace(_prepNoteDraft);
 
+    private string PrepNotesPanelCssClass =>
+        _arePrepNotesExpanded
+            ? "rsvp-notes"
+            : "rsvp-notes is-collapsed";
+
+    private UiIconKind PrepNotesToggleIcon =>
+        _arePrepNotesExpanded
+            ? UiIconKind.ChevronDown
+            : UiIconKind.ChevronRight;
+
     private async Task LoadPrepNotesAsync()
     {
         var scriptKey = ResolvePrepNotesScriptKey();
@@ -37,6 +48,9 @@ private async Task LoadPrepNotesAsync()
     private void HandlePrepNoteDraftChanged(ChangeEventArgs args) =>
         _prepNoteDraft = args.Value?.ToString() ?? string.Empty;
 
+    private void TogglePrepNotesExpanded() =>
+        _arePrepNotesExpanded = !_arePrepNotesExpanded;
+
     private async Task AddPrepNoteAsync()
     {
         if (!CanAddPrepNote)

src/PrompterOne.Shared/Learn/Pages/LearnPage.razor

@@ -27,7 +27,7 @@
              @ref="_displayRoot"
              data-rsvp-layout-ready="@BuildLayoutReadyAttributeValue()"
              data-test="@UiTestIds.Learn.Display">
-            <div style="@BuildPendingLayoutHiddenStyle()">
+            <div class="rsvp-focus-stage" style="@BuildPendingLayoutHiddenStyle()">
                 <div class="rsvp-crosshair">
                     <UiCrosshairGuide TestId="@UiTestIds.Learn.Crosshair" />
                 </div>
@@ -80,43 +80,57 @@
                 <div id="@UiDomIds.Learn.PauseFill" class="rsvp-pause-fill"></div>
             </div>
 
-            <aside class="rsvp-notes"
+            <aside class="@PrepNotesPanelCssClass"
                    data-test="@UiTestIds.Learn.NotesPanel"
+                   data-expanded="@_arePrepNotesExpanded.ToString().ToLowerInvariant()"
                    @onkeydown:stopPropagation="true">
                 <div class="rsvp-notes-head">
-                    <span class="rsvp-notes-title">@Text(UiTextKey.LearnNotesTitle)</span>
+                    <button class="rsvp-notes-toggle"
+                            type="button"
+                            aria-label="@Text(UiTextKey.LearnNotesTitle)"
+                            aria-controls="@UiDomIds.Learn.NotesBody"
+                            aria-expanded="@_arePrepNotesExpanded.ToString().ToLowerInvariant()"
+                            @onclick="TogglePrepNotesExpanded"
+                            data-test="@UiTestIds.Learn.NotesToggle">
+                        <span class="rsvp-notes-title">@Text(UiTextKey.LearnNotesTitle)</span>
+                        <UiIcon Kind="@PrepNotesToggleIcon" Size="16" StrokeWidth="2.4m" />
+                    </button>
                     <span class="rsvp-notes-section" data-test="@UiTestIds.Learn.NotesSection">@CurrentPrepNotesSectionLabel</span>
                 </div>
-                <textarea class="rsvp-notes-input"
-                          rows="3"
-                          value="@_prepNoteDraft"
-                          placeholder="@Text(UiTextKey.LearnNotesPlaceholder)"
-                          aria-label="@Text(UiTextKey.LearnNotesTitle)"
-                          @oninput="HandlePrepNoteDraftChanged"
-                          data-test="@UiTestIds.Learn.NotesTextarea"></textarea>
-                <button class="rsvp-notes-save"
-                        type="button"
-                        disabled="@(!CanAddPrepNote)"
-                        @onclick="AddPrepNoteAsync"
-                        data-test="@UiTestIds.Learn.NotesSave">@Text(UiTextKey.LearnNotesSave)</button>
-                <div class="rsvp-notes-list" data-test="@UiTestIds.Learn.NotesList">
-                    @{
-                        var currentNotes = CurrentSectionPrepNotes;
-                    }
-                    @if (currentNotes.Count == 0)
-                    {
-                        <p class="rsvp-notes-empty" data-test="@UiTestIds.Learn.NotesEmpty">@Text(UiTextKey.LearnNotesEmpty)</p>
-                    }
-                    else
-                    {
-                        @foreach (var note in currentNotes)
+                <div class="rsvp-notes-body"
+                     id="@UiDomIds.Learn.NotesBody"
+                     hidden="@(!_arePrepNotesExpanded)">
+                    <textarea class="rsvp-notes-input"
+                              rows="3"
+                              value="@_prepNoteDraft"
+                              placeholder="@Text(UiTextKey.LearnNotesPlaceholder)"
+                              aria-label="@Text(UiTextKey.LearnNotesTitle)"
+                              @oninput="HandlePrepNoteDraftChanged"
+                              data-test="@UiTestIds.Learn.NotesTextarea"></textarea>
+                    <button class="rsvp-notes-save"
+                            type="button"
+                            disabled="@(!CanAddPrepNote)"
+                            @onclick="AddPrepNoteAsync"
+                            data-test="@UiTestIds.Learn.NotesSave">@Text(UiTextKey.LearnNotesSave)</button>
+                    <div class="rsvp-notes-list" data-test="@UiTestIds.Learn.NotesList">
+                        @{
+                            var currentNotes = CurrentSectionPrepNotes;
+                        }
+                        @if (currentNotes.Count == 0)
                         {
-                            <article class="rsvp-note" data-test="@UiTestIds.Learn.NoteItem(note.Id)">
-                                <span class="rsvp-note-anchor">@note.AnchorWord</span>
-                                <p>@note.Text</p>
-                            </article>
+                            <p class="rsvp-notes-empty" data-test="@UiTestIds.Learn.NotesEmpty">@Text(UiTextKey.LearnNotesEmpty)</p>
                         }
-                    }
+                        else
+                        {
+                            @foreach (var note in currentNotes)
+                            {
+                                <article class="rsvp-note" data-test="@UiTestIds.Learn.NoteItem(note.Id)">
+                                    <span class="rsvp-note-anchor">@note.AnchorWord</span>
+                                    <p>@note.Text</p>
+                                </article>
+                            }
+                        }
+                    </div>
                 </div>
             </aside>
         </div>

src/PrompterOne.Shared/Learn/Pages/LearnPage.razor.cs

@@ -57,6 +57,7 @@ public partial class LearnPage : IAsyncDisposable
     private bool _isPlaying;
     private bool _isLoopEnabled;
     private bool _loadState = true;
+    private bool _arePrepNotesExpanded = true;
     private bool _focusScreenAfterRender = true;
     private bool _syncFocusLayoutAfterRender;
     private bool _startPlaybackAfterLayoutSync;

src/PrompterOne.Shared/Localization/SharedResource.de.resx

@@ -561,6 +561,9 @@
   <data name="TooltipReaderSpeedCueDisplayMultiplier" xml:space="preserve">
     <value>Geschwindigkeitsmarken als Multiplikatoren anzeigen</value>
   </data>
+  <data name="TooltipReaderSpeedDial" xml:space="preserve">
+    <value>Live-Geschwindigkeitsregler für den Reader anpassen</value>
+  </data>
   <data name="TooltipSmallerText" xml:space="preserve">
     <value>Kleinerer Text</value>
   </data>

src/PrompterOne.Shared/Localization/SharedResource.es.resx

@@ -561,6 +561,9 @@
   <data name="TooltipReaderSpeedCueDisplayMultiplier" xml:space="preserve">
     <value>Mostrar las etiquetas de velocidad como multiplicadores</value>
   </data>
+  <data name="TooltipReaderSpeedDial" xml:space="preserve">
+    <value>Ajustar el dial de velocidad en vivo del lector</value>
+  </data>
   <data name="TooltipSmallerText" xml:space="preserve">
     <value>Texto más pequeño</value>
   </data>

src/PrompterOne.Shared/Localization/SharedResource.fr.resx

@@ -561,6 +561,9 @@
   <data name="TooltipReaderSpeedCueDisplayMultiplier" xml:space="preserve">
     <value>Afficher les repères de vitesse en multiplicateurs</value>
   </data>
+  <data name="TooltipReaderSpeedDial" xml:space="preserve">
+    <value>Régler le cadran de vitesse en direct du lecteur</value>
+  </data>
   <data name="TooltipSmallerText" xml:space="preserve">
     <value>Texte plus petit</value>
   </data>