Highlight active RSVP phrase (#32)

Author: KSemenenko

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

@@ -8,6 +8,7 @@ public static class Learn
         public const string ContextLeft = "learn-context-left";
         public const string ContextRight = "learn-context-right";
         public const string Display = "learn-display";
+        public const string ActivePhraseHighlight = "learn-active-phrase-highlight";
         public const string FocusRow = "learn-focus-row";
         public const string LoopToggle = "learn-loop-toggle";
         public const string NextPhrase = "learn-next-phrase";

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

@@ -33,6 +33,9 @@
                 </div>
 
                 <div class="rsvp-h-row" @ref="_focusRow" data-test="@UiTestIds.Learn.FocusRow">
+                    <div class="rsvp-active-phrase-highlight"
+                         aria-hidden="true"
+                         data-test="@UiTestIds.Learn.ActivePhraseHighlight"></div>
                     <div class="rsvp-lane rsvp-lane-left">
                         <div class="rsvp-ctx-left" id="@UiDomIds.Learn.ContextLeft" data-test="@UiTestIds.Learn.ContextLeft">
                             @foreach (var word in _leftContextWords)

src/PrompterOne.Shared/wwwroot/design/modules/30-rsvp.css

@@ -104,6 +104,8 @@
     min-width: 0;
     display: flex;
     align-items: baseline;
+    position: relative;
+    z-index: 1;
 }
 
 .rsvp-lane-left {
@@ -153,6 +155,21 @@
     z-index: 1;
 }
 
+.rsvp-active-phrase-highlight {
+    position: absolute;
+    left: clamp(34px, 9vw, 170px);
+    right: clamp(34px, 9vw, 170px);
+    bottom: 24px;
+    height: 48px;
+    border-radius: 999px;
+    border-bottom: 2px solid rgba(232, 213, 176, .24);
+    background:
+        linear-gradient(90deg, transparent 0%, rgba(232, 213, 176, .055) 18%, rgba(232, 213, 176, .085) 50%, rgba(232, 213, 176, .055) 82%, transparent 100%);
+    box-shadow: 0 12px 36px rgba(232, 213, 176, .045);
+    pointer-events: none;
+    z-index: 0;
+}
+
 /* Focus word — large, centered, with ORP highlight */
 .rsvp-focus {
     display: inline-flex;

src/PrompterOne.Shared/wwwroot/design/modules/31-rsvp-responsive.css

@@ -14,6 +14,13 @@
         min-height: 112px;
     }
 
+    .rsvp-active-phrase-highlight {
+        left: clamp(18px, 6vw, 42px);
+        right: clamp(18px, 6vw, 42px);
+        bottom: 18px;
+        height: 38px;
+    }
+
     .rsvp-ctx-left,
     .rsvp-ctx-right {
         gap: 10px;

tests/PrompterOne.Web.Tests/AppShell/ScreenShellContractTests.cs

@@ -63,6 +63,7 @@ public void LearnPage_RendersCenteredRsvpSurfaceAndInitializesTimeline()
         {
             Assert.NotNull(cut.FindByTestId(UiTestIds.Learn.Page));
             Assert.NotNull(cut.FindByTestId(UiTestIds.Learn.Display));
+            Assert.NotNull(cut.FindByTestId(UiTestIds.Learn.ActivePhraseHighlight));
             Assert.NotNull(cut.FindByTestId(UiTestIds.Learn.Word));
             Assert.NotNull(cut.FindByTestId(UiTestIds.Learn.WordShell));
             Assert.NotNull(cut.FindByTestId(UiTestIds.Learn.OrpLine));

tests/PrompterOne.Web.UITests.Reader/Learn/LearnFidelityTests.cs

@@ -12,6 +12,12 @@ public sealed class LearnFidelityTests(StandaloneAppFixture fixture)
     private readonly record struct ContextGapMeasurement(double LeftGapPx, double RightGapPx);
     private readonly record struct ContextRailClipMeasurement(double LeftClipPx, double RightClipPx);
     private readonly record struct FocusWordSlackMeasurement(double SlackPx);
+    private readonly record struct ActivePhraseHighlightMeasurement(
+        double HighlightWidthPx,
+        double RowWidthPx,
+        double WordWidthPx,
+        string BorderBottomStyle,
+        string BackgroundImage);
     private readonly record struct OrpDeltaMeasurement(double DeltaPx);
     private readonly record struct VisibleContextWordGapMeasurement(double LeftWordGapPx, double RightWordGapPx);
 
@@ -76,6 +82,38 @@ await Expect(page.GetByTestId(UiTestIds.Learn.NextPhrase))
         }
     }
 
+    [Test]
+    public async Task LearnScreen_ActivePhraseHighlightMarksMoreThanTheCurrentWord()
+    {
+        const string scenario = "learn-active-phrase-highlight";
+        const string step = "active-phrase-highlight";
+        var page = await fixture.NewPageAsync(additionalContext: true);
+
+        try
+        {
+            UiScenarioArtifacts.ResetScenario(scenario);
+
+            await ReaderRouteDriver.OpenLearnAsync(page, BrowserTestConstants.Routes.LearnDemo);
+            await Expect(page.GetByTestId(UiTestIds.Learn.Page))
+                .ToBeVisibleAsync(new() { Timeout = BrowserTestConstants.Timing.ExtendedVisibleTimeoutMs });
+            await Expect(page.GetByTestId(UiTestIds.Learn.ActivePhraseHighlight)).ToBeVisibleAsync();
+            await WaitForLearnLayoutReadyAsync(page);
+
+            var measurement = await MeasureActivePhraseHighlightAsync(page);
+
+            await Assert.That(measurement.HighlightWidthPx > measurement.WordWidthPx * 1.45).IsTrue().Because($"Expected the RSVP active phrase highlight to span beyond only the current word, but highlight={measurement.HighlightWidthPx:0.##}px and word={measurement.WordWidthPx:0.##}px.");
+            await Assert.That(measurement.HighlightWidthPx <= measurement.RowWidthPx).IsTrue().Because($"Expected the RSVP active phrase highlight to stay inside the focus row, but highlight={measurement.HighlightWidthPx:0.##}px and row={measurement.RowWidthPx:0.##}px.");
+            await Assert.That(measurement.BorderBottomStyle).IsEqualTo("solid");
+            await Assert.That(measurement.BackgroundImage).IsNotEqualTo("none");
+
+            await UiScenarioArtifacts.CapturePageAsync(page, scenario, step);
+        }
+        finally
+        {
+            await page.Context.CloseAsync();
+        }
+    }
+
     [Test]
     public async Task LearnScreen_DemoContextRails_ShowTwoWordsPerSideWithoutRightRailClipping()
     {
@@ -462,6 +500,44 @@ private static Task<ContextGapMeasurement> MeasureContextGapsAsync(Microsoft.Pla
                 right = UiTestIds.Learn.ContextRight
             });
 
+    private static Task<ActivePhraseHighlightMeasurement> MeasureActivePhraseHighlightAsync(Microsoft.Playwright.IPage page) =>
+        page.EvaluateAsync<ActivePhraseHighlightMeasurement>(
+            """
+            ids => {
+                const highlight = document.querySelector(`[data-test="${ids.highlight}"]`);
+                const row = document.querySelector(`[data-test="${ids.row}"]`);
+                const word = document.querySelector(`[data-test="${ids.word}"]`);
+                if (!highlight || !row || !word) {
+                    return {
+                        highlightWidthPx: 0,
+                        rowWidthPx: 0,
+                        wordWidthPx: 0,
+                        borderBottomStyle: '',
+                        backgroundImage: 'none'
+                    };
+                }
+
+                const highlightRect = highlight.getBoundingClientRect();
+                const rowRect = row.getBoundingClientRect();
+                const wordRect = word.getBoundingClientRect();
+                const style = getComputedStyle(highlight);
+
+                return {
+                    highlightWidthPx: highlightRect.width,
+                    rowWidthPx: rowRect.width,
+                    wordWidthPx: wordRect.width,
+                    borderBottomStyle: style.borderBottomStyle,
+                    backgroundImage: style.backgroundImage
+                };
+            }
+            """,
+            new
+            {
+                highlight = UiTestIds.Learn.ActivePhraseHighlight,
+                row = UiTestIds.Learn.FocusRow,
+                word = UiTestIds.Learn.Word
+            });
+
     private static Task<VisibleContextWordGapMeasurement> MeasureVisibleContextWordGapsAsync(Microsoft.Playwright.IPage page) =>
         page.EvaluateAsync<VisibleContextWordGapMeasurement>(
             """