fix(notes): address review findings on teleprompter mode

Play was a no-op whenever there was nothing left to scroll: a note that fits
the window, or a run that had already reached the bottom, flipped the button to
Pause and back within two frames. isAtTeleprompterEnd() now reports the end only
when there is somewhere to go, and starting playback at the bottom rewinds to
the top instead of leaving the control looking inert.

Playback also tracked its position through the DOM, re-reading scrollTop every
frame. At the slowest speed a frame advances ~0.17px, which an engine that snaps
scroll offsets to whole pixels would round away, stalling the teleprompter.
resolveTeleprompterPosition() keeps the fractional position internally and hands
control back to the DOM once it drifts past a pixel, so scrolling by hand
mid-playback still moves the teleprompter rather than fighting it.

Also:

- Drop NotesToolbar.browser.test.tsx and port what jsdom can assert into
  NotesToolbar.test.tsx. vitest.config.ts excludes src/**/*.browser.test.*, and
  the repo has no vitest.browser.config.ts and no test:browser script, so the
  file never ran anywhere — CI included.
- Restore the no-scrollbar utility the toolbar lost when it was split into two
  rows; without it both rows paint a horizontal scrollbar once they overflow.
- Convert the remaining tiptap spacing to em so it tracks the teleprompter font
  size. Identical at the default 16px; heading margins stay in rem because em
  there resolves against the heading's own enlarged size.
- Stop announcing playback twice: the play button keeps its state-dependent
  label and drops aria-pressed, via a new highlighted prop that styles without
  the toggle semantics.
- Make the note read-only while playing and disable formatting with it, so a
  keystroke can no longer yank the scroll through scroll-caret-into-view.
- Move the generic units.* keys from the launch namespace to common.
- Skip the mount-time settings write, load the initial note once, and drop a
  no-op transform-origin rule.

Author: EtienneLescot

src/components/launch/NotesToolbar.browser.test.tsx

@@ -2,15 +2,22 @@ import "@testing-library/jest-dom";
 import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { Editor } from "@tiptap/react";
-import { type ReactNode, useLayoutEffect } from "react";
-import { describe, expect, it, vi } from "vitest";
+import { type ReactNode, useLayoutEffect, useState } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { I18nProvider, useI18n } from "@/contexts/I18nContext";
+import { LOCALE_STORAGE_KEY } from "@/i18n/config";
 import { NotesToolbar, type NotesToolbarProps } from "./NotesToolbar";
 
 vi.mock("@/components/ui/tooltip", () => ({
 	Tooltip: ({ children }: { children: React.ReactNode }) => children,
 }));
 
+beforeEach(() => {
+	// `setLocale` persists its choice, and `I18nProvider` reads it back on mount — without
+	// this, the one test that switches language would leak into every test after it.
+	localStorage.removeItem(LOCALE_STORAGE_KEY);
+});
+
 function createEditor(): Editor {
 	const chain: Record<string, ReturnType<typeof vi.fn>> = {};
 	for (const command of [
@@ -131,6 +138,40 @@ describe("NotesToolbar teleprompter controls", () => {
 		expect(screen.queryByRole("button", { name: "Pause auto-scroll" })).not.toBeInTheDocument();
 	});
 
+	it("announces playback through its label rather than a second pressed state", () => {
+		const { rerender } = renderToolbar(createProps());
+		expect(screen.getByRole("button", { name: "Start auto-scroll" })).not.toHaveAttribute(
+			"aria-pressed",
+		);
+
+		rerender(
+			<I18nProvider>
+				<NotesToolbar {...createProps({ isPlaying: true })} />
+			</I18nProvider>,
+		);
+		expect(screen.getByRole("button", { name: "Pause auto-scroll" })).not.toHaveAttribute(
+			"aria-pressed",
+		);
+	});
+
+	it("locks formatting while the teleprompter scrolls", () => {
+		renderToolbar(createProps({ isPlaying: true }));
+
+		// Sweep the whole row rather than a hand-written list, so a formatting button added
+		// later cannot quietly escape the lock.
+		const formatting = within(screen.getByTestId("notes-formatting-controls")).getAllByRole(
+			"button",
+		);
+		expect(formatting).toHaveLength(7);
+		for (const button of formatting) {
+			expect(button).toBeDisabled();
+		}
+
+		// Teleprompter controls stay live so playback can always be stopped.
+		expect(screen.getByRole("button", { name: "Pause auto-scroll" })).toBeEnabled();
+		expect(screen.getByRole("button", { name: "Mirror horizontally" })).toBeEnabled();
+	});
+
 	it("formats readout values for the active locale", () => {
 		renderToolbar(createProps(), "ar");
 		const speed = within(screen.getByRole("group", { name: "سرعة التمرير" })).getByRole("status");
@@ -142,3 +183,52 @@ describe("NotesToolbar teleprompter controls", () => {
 		expect(fontSize).toHaveTextContent(`${new Intl.NumberFormat("ar").format(16)} بكسل`);
 	});
 });
+
+function ToolbarHarness() {
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [mirrored, setMirrored] = useState(false);
+
+	return (
+		<NotesToolbar
+			{...createProps({
+				isPlaying,
+				mirrored,
+				onTogglePlaying: () => setIsPlaying((current) => !current),
+				onToggleMirror: () => setMirrored((current) => !current),
+			})}
+		/>
+	);
+}
+
+describe("NotesToolbar keyboard reachability", () => {
+	it("walks every teleprompter control in order and toggles them from the keyboard", async () => {
+		const user = userEvent.setup();
+		const { container } = render(
+			<I18nProvider>
+				<ToolbarHarness />
+			</I18nProvider>,
+		);
+
+		const row = container.querySelector<HTMLElement>('[data-testid="notes-teleprompter-controls"]');
+		const controls = Array.from(
+			container.querySelectorAll<HTMLButtonElement>("[data-teleprompter-control]"),
+		);
+		expect(row).not.toBeNull();
+		expect(controls).toHaveLength(6);
+
+		controls[0]?.focus();
+		expect(document.activeElement).toBe(controls[0]);
+		for (let index = 1; index < controls.length; index++) {
+			await user.tab();
+			expect(document.activeElement).toBe(controls[index]);
+		}
+
+		controls[0]?.focus();
+		await user.keyboard("{Enter}");
+		expect(controls[0]).toHaveAttribute("aria-label", "Pause auto-scroll");
+
+		const mirror = controls.at(-1);
+		await user.click(mirror as HTMLButtonElement);
+		expect(mirror).toHaveAttribute("aria-pressed", "true");
+	});
+});