Expand E2E coverage for default stage direction style feature

Adds full end-to-end coverage: default preview colour assertion (verifies
darkslateblue fallback), WS sync round-trip (preview updates after PATCH),
persistence across page reload (GET /api/v1/user/settings), text colour
override path, and Reset to Default restoring the fallback.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Tim020

client-v3/e2e/tests/14-user-settings.spec.ts

@@ -93,6 +93,14 @@ test('"Default Stage Direction Style" section is visible', async () => {
   await expect(page.locator('.card:has-text("Default Stage Direction Style")')).toBeVisible();
 });
 
+test('default preview uses darkslateblue before any override', async () => {
+  // The card's example element should reflect the built-in fallback colour
+  const preview = page
+    .locator('.card:has-text("Default Stage Direction Style")')
+    .locator('.example-stage-direction');
+  await expect(preview).toHaveCSS('background-color', 'rgb(72, 61, 139)'); // darkslateblue
+});
+
 test('"Customise" button opens the default style modal', async () => {
   await page
     .locator('.card:has-text("Default Stage Direction Style") button:has-text("Customise")')
@@ -101,26 +109,73 @@ test('"Customise" button opens the default style modal', async () => {
   await expect(page.locator('#default-bg-colour-input')).toBeVisible();
 });
 
-test('setting a custom background colour saves and shows Reset button', async () => {
+test('setting a custom background colour saves and updates the card preview', async () => {
   await page.locator('#default-bg-colour-input').fill('#FF0000');
   await confirmModal(page);
   await waitForModalClosed(page);
+  // Reset button appears (verifies PATCH /api/v1/user/settings was persisted)
+  await expect(
+    page.locator(
+      '.card:has-text("Default Stage Direction Style") button:has-text("Reset to Default")'
+    )
+  ).toBeVisible({ timeout: 5_000 });
+  // Card preview reflects saved colour (verifies WS GET_USER_SETTINGS sync updated the store)
+  const preview = page
+    .locator('.card:has-text("Default Stage Direction Style")')
+    .locator('.example-stage-direction');
+  await expect(preview).toHaveCSS('background-color', 'rgb(255, 0, 0)');
+});
+
+test('custom colour persists after page reload', async () => {
+  await page.reload();
+  await waitForAppReady(page);
+  await page.click('.nav-link:has-text("Stage Direction")');
+  await expect(page.locator('#stage-directions-table')).toBeVisible({ timeout: 5_000 });
+  // Reset button should still be present (colour was persisted to DB via GET /api/v1/user/settings)
   await expect(
     page.locator(
       '.card:has-text("Default Stage Direction Style") button:has-text("Reset to Default")'
     )
   ).toBeVisible({ timeout: 5_000 });
+  const preview = page
+    .locator('.card:has-text("Default Stage Direction Style")')
+    .locator('.example-stage-direction');
+  await expect(preview).toHaveCSS('background-color', 'rgb(255, 0, 0)');
+});
+
+test('text colour override can be enabled and saved', async () => {
+  await page
+    .locator('.card:has-text("Default Stage Direction Style") button:has-text("Customise")')
+    .click();
+  await waitForModal(page, 'Customise Default Stage Direction Style');
+  // Enable text colour override
+  await page.locator('.modal.show').getByText('Override text colour').click();
+  await expect(page.locator('#default-text-colour-input')).toBeVisible();
+  await page.locator('#default-text-colour-input').fill('#FFFFFF');
+  await confirmModal(page);
+  await waitForModalClosed(page);
+  // Preview text colour should update (white text on red background)
+  const preview = page
+    .locator('.card:has-text("Default Stage Direction Style")')
+    .locator('.example-stage-direction');
+  await expect(preview).toHaveCSS('color', 'rgb(255, 255, 255)', { timeout: 5_000 });
 });
 
-test('"Reset to Default" removes the custom style', async () => {
+test('"Reset to Default" removes both colour overrides', async () => {
   await page
     .locator('.card:has-text("Default Stage Direction Style") button:has-text("Reset to Default")')
     .click();
+  // Reset button disappears once both overrides are cleared
   await expect(
     page.locator(
       '.card:has-text("Default Stage Direction Style") button:has-text("Reset to Default")'
     )
   ).not.toBeVisible({ timeout: 5_000 });
+  // Preview reverts to darkslateblue
+  const preview = page
+    .locator('.card:has-text("Default Stage Direction Style")')
+    .locator('.example-stage-direction');
+  await expect(preview).toHaveCSS('background-color', 'rgb(72, 61, 139)', { timeout: 5_000 });
 });
 
 test('"New Override" button is enabled when stage direction styles exist', async () => {