feat(settings): grouped navigation, cards and switches from the settings concept (#1853)

* feat(settings): grouped navigation, cards and switches from the settings concept

Implements the Claude Design "Settings concept" handoff.

Navigation: the sidebar is a 20px "Settings" title over App, Library, Devices
and Data groups, with About pinned to the footer beside the installed version
and an update badge. The active item is a soft fill without a border. Esc
leaves settings like the header Back. Reset is no longer a page: its one
destructive action is the last card of "Backup & data".

Pages: a title and one-line subtitle, then rows grouped into titled cards
with one right-aligned control column. Selects are compact without floating
labels, checkboxes are switches, segmented controls are pills, and
descriptions are capped at 56ch. "Show subtitles" moves to Playback, the
Embedded MPV note becomes a callout under the player select (only while it
is selected), and the TMDB attribution becomes the About footer.

EPG: Add and Refresh all sit in the Sources header, the empty state has its
own Add, the format examples are one line, Clear EPG data is its own row and
the offset is a stepper. About: version, update state and channel share one
card; the nightly warning is a callout shown only while Nightly is selected,
with a shortcut to the backup page; the support buttons are neutral with
coloured icons.

Save model: the save bar stays (design option B) and now floats over the
content column, counts the staged changes, answers Cmd/Ctrl+S, and marks
pages with staged edits in the sidebar. A saved change that waits for a
restart shows a dismissible notice.

Rows stack under 600px of pane width (the page is a size container, so the
persistent sidebar is accounted for). Page-specific styles moved into the
About, EPG, Backup and Remote control section stylesheets to stay within the
component style budget. New SETTINGS keys are translated in all 19 locales
and NAV_RESET is removed; brand names and loanwords that stay English are in
the identical-value baseline.

E2E: Material slide toggles report aria-checked after the next render, so
both suites toggle through a setSwitch helper; the settings nav is a
navigation landmark, so the Dashboard rail link is scoped to the rail.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* fix(settings): compare restart notices against the running app, fix CI fallout

The restart notice now lists only the restart controls whose saved value
differs from what the running app uses: the stored values at first load,
or what the embedded engine reports it actually runs for the frame-copy
opt-in. Saving the launch value back withdraws the notice instead of
leaving it up with no chip to explain it. The refresh reads the current
list untracked and writes only a changed one, because the engine probe
effect calls it.

CI: the zoneless checklist dropped the deleted Reset section component, and
the theme-tokens Electron E2E floats the recording folder label on the
Playback page now that the settings selects carry no floating label.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* fix(settings): keep a dismissed restart reminder away until the setting changes

"Later" now records the saved value it dismissed, for the rest of the app
run, so an unrelated save (or reopening Settings) does not bring the same
reminder back. It returns once a restart setting is saved with another
value.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

apps/electron-backend-e2e/src/electron-test-fixtures.ts

@@ -972,18 +972,33 @@ export async function openSettingsSection(
     await page.waitForURL(new RegExp(`/workspace/settings/${sectionId}$`));
 }
 
+/**
+ * Material slide toggles render `aria-checked` after Angular's next change
+ * detection, later than Playwright's `check()` looks, which then reports
+ * that the click changed nothing. Click when needed and wait for the state.
+ */
+export async function setSwitch(
+    toggle: Locator,
+    checked: boolean
+): Promise<void> {
+    if ((await toggle.isChecked()) !== checked) {
+        await toggle.click();
+    }
+    await expect(toggle).toBeChecked({ checked });
+}
+
 export async function enableRemoteControl(
     page: Page,
     port: number
 ): Promise<void> {
     await openSettingsSection(page, 'remote-control');
 
-    const remoteControlCheckbox = page.locator(
-        'mat-checkbox[formcontrolname="remoteControl"] input[type="checkbox"]'
+    const remoteControlSwitch = page.locator(
+        'mat-slide-toggle[formcontrolname="remoteControl"] [role="switch"]'
     );
 
-    await remoteControlCheckbox.scrollIntoViewIfNeeded();
-    await remoteControlCheckbox.check();
+    await remoteControlSwitch.scrollIntoViewIfNeeded();
+    await setSwitch(remoteControlSwitch, true);
     await page.locator('#remoteControlPort').fill(String(port));
 }
 

apps/electron-backend-e2e/src/epg.e2e.ts

@@ -17,6 +17,7 @@ import {
     openSettings,
     openSettingsSection,
     saveSettings,
+    setSwitch,
     test,
 } from './electron-test-fixtures';
 
@@ -161,8 +162,8 @@ test.describe('Electron EPG', () => {
             });
             const guard = app.mainWindow
                 .getByTestId('portal-connectivity-toggle')
-                .locator('input');
-            await guard.uncheck();
+                .getByRole('switch');
+            await setSwitch(guard, false);
             await expect(
                 app.mainWindow.getByTestId('settings-unsaved-bar')
             ).toBeVisible();
@@ -192,10 +193,12 @@ test.describe('Electron EPG', () => {
                 });
             });
             await openSettingsSection(app.mainWindow, 'general');
-            await app.mainWindow
-                .getByTestId('portal-connectivity-toggle')
-                .locator('input')
-                .uncheck();
+            await setSwitch(
+                app.mainWindow
+                    .getByTestId('portal-connectivity-toggle')
+                    .getByRole('switch'),
+                false
+            );
             await openSettingsSection(app.mainWindow, 'epg');
             await app.mainWindow
                 .getByRole('button', { name: 'Add EPG source' })

apps/electron-backend-e2e/src/picture-in-picture.e2e.ts

@@ -10,6 +10,7 @@ import {
     openSettings,
     openSettingsSection,
     saveSettings,
+    setSwitch,
     test,
 } from './electron-test-fixtures';
 
@@ -37,10 +38,10 @@ for (const player of ['html5', 'videojs', 'artplayer']) {
                 await openSettingsSection(page, 'playback');
                 await page.getByTestId('select-video-player').click();
                 await page.getByTestId(player).click();
-                await page
+                const sharedControlsSwitch = page
                     .getByTestId('web-player-shared-controls-setting')
-                    .locator('input[type="checkbox"]')
-                    .setChecked(sharedControls);
+                    .getByRole('switch');
+                await setSwitch(sharedControlsSwitch, sharedControls);
                 // A fresh profile defaults to Video.js with shared controls.
                 // For changed settings, await the save control through the
                 // helper; an immediate isVisible() can miss Angular rendering it.

apps/electron-backend-e2e/src/settings-connectivity-guard.e2e.ts

@@ -7,6 +7,7 @@ import {
     openSettings,
     openSettingsSection,
     saveSettings,
+    setSwitch,
     test,
 } from './electron-test-fixtures';
 
@@ -72,7 +73,7 @@ test('@settings @electron saves the portal cooldown preference and applies it wi
         await openSettingsSection(app.mainWindow, 'general');
         let checkbox = app.mainWindow
             .getByTestId('portal-connectivity-toggle')
-            .getByRole('checkbox');
+            .getByRole('switch');
         await expect(checkbox).toBeChecked();
         await requestFailure(app.mainWindow, origin);
         await requestFailure(app.mainWindow, origin);
@@ -80,7 +81,7 @@ test('@settings @electron saves the portal cooldown preference and applies it wi
             pausedMessage
         );
 
-        await checkbox.uncheck();
+        await setSwitch(checkbox, false);
         // An unsaved edit cannot alter backend policy.
         expect(await requestFailure(app.mainWindow, origin)).toContain(
             pausedMessage
@@ -114,9 +115,9 @@ test('@settings @electron saves the portal cooldown preference and applies it wi
         await openSettingsSection(app.mainWindow, 'general');
         checkbox = app.mainWindow
             .getByTestId('portal-connectivity-toggle')
-            .getByRole('checkbox');
+            .getByRole('switch');
         await expect(checkbox).not.toBeChecked();
-        await checkbox.check();
+        await setSwitch(checkbox, true);
         await saveSettings(app.mainWindow);
         expect(await requestFailure(app.mainWindow, origin)).toContain(
             xtreamNetworkFailure

apps/electron-backend-e2e/src/settings.e2e.ts

@@ -21,6 +21,7 @@ import {
     resetMockServers,
     restartElectronApp,
     saveSettings,
+    setSwitch,
     test,
     waitForXtreamWorkspaceReady,
 } from './electron-test-fixtures';
@@ -94,7 +95,7 @@ test.describe('Electron Settings', () => {
                 'external-player-double-click-setting'
             );
             const doubleClickCheckbox = doubleClickSetting.locator(
-                'input[type="checkbox"]'
+                '[role="switch"]'
             );
 
             await expect(doubleClickSetting).toBeVisible();
@@ -122,7 +123,7 @@ test.describe('Electron Settings', () => {
             await openSettings(app.mainWindow);
             await openSettingsSection(app.mainWindow, 'playback');
             await expect(doubleClickSetting).toBeVisible();
-            await doubleClickCheckbox.check();
+            await setSwitch(doubleClickCheckbox, true);
             await saveSettings(app.mainWindow);
             await app.mainWindow.goBack();
             await app.mainWindow.waitForURL(/\/workspace\/playlists\/.+/);
@@ -241,12 +242,12 @@ test.describe('Electron Settings', () => {
             );
             const sharedControlsCheckbox = firstLaunch.mainWindow
                 .getByTestId('web-player-shared-controls-setting')
-                .locator('input[type="checkbox"]');
+                .locator('[role="switch"]');
             await expect(sharedControlsCheckbox).toBeVisible();
             // Shared controls default ON — persist the discriminating opt-out
             // so the relaunch proves an explicit false survives the
             // absent-means-true coercion.
-            await sharedControlsCheckbox.uncheck();
+            await setSwitch(sharedControlsCheckbox, false);
             await selectSettingsOption(
                 firstLaunch.mainWindow,
                 'select-stream-format',
@@ -254,9 +255,9 @@ test.describe('Electron Settings', () => {
             );
             await firstLaunch.mainWindow
                 .locator(
-                    'mat-checkbox[formcontrolname="showExternalPlaybackBar"] input[type="checkbox"]'
+                    'mat-slide-toggle[formcontrolname="showExternalPlaybackBar"] [role="switch"]'
                 )
-                .uncheck();
+                .click();
             await enableRemoteControl(firstLaunch.mainWindow, 8877);
             await openSettingsSection(firstLaunch.mainWindow, 'epg');
             await firstLaunch.mainWindow
@@ -289,20 +290,20 @@ test.describe('Electron Settings', () => {
             await expect(
                 secondLaunch.mainWindow
                     .getByTestId('web-player-shared-controls-setting')
-                    .locator('input[type="checkbox"]')
+                    .locator('[role="switch"]')
             ).not.toBeChecked();
             await expect(
                 secondLaunch.mainWindow.getByTestId('select-stream-format')
             ).toContainText('ts');
             await expect(
                 secondLaunch.mainWindow.locator(
-                    'mat-checkbox[formcontrolname="showExternalPlaybackBar"] input[type="checkbox"]'
+                    'mat-slide-toggle[formcontrolname="showExternalPlaybackBar"] [role="switch"]'
                 )
             ).not.toBeChecked();
             await openSettingsSection(secondLaunch.mainWindow, 'remote-control');
             await expect(
                 secondLaunch.mainWindow.locator(
-                    'mat-checkbox[formcontrolname="remoteControl"] input[type="checkbox"]'
+                    'mat-slide-toggle[formcontrolname="remoteControl"] [role="switch"]'
                 )
             ).toBeChecked();
             await expect(
@@ -333,9 +334,9 @@ test.describe('Electron Settings', () => {
             );
             const sharedControlsCheckbox = app.mainWindow
                 .getByTestId('web-player-shared-controls-setting')
-                .locator('input[type="checkbox"]');
+                .locator('[role="switch"]');
             await expect(sharedControlsCheckbox).toBeVisible();
-            await sharedControlsCheckbox.check();
+            await setSwitch(sharedControlsCheckbox, true);
             await saveSettings(app.mainWindow);
 
             await goToDashboard(app.mainWindow);
@@ -622,9 +623,9 @@ test.describe('Electron Settings', () => {
             await openSettingsSection(firstLaunch.mainWindow, 'dashboard');
             await firstLaunch.mainWindow
                 .locator(
-                    'mat-checkbox[formcontrolname="showDashboard"] input[type="checkbox"]'
+                    'mat-slide-toggle[formcontrolname="showDashboard"] [role="switch"]'
                 )
-                .uncheck();
+                .click();
             for (const toggleId of [
                 'toggle-dashboard-hero',
                 'toggle-dashboard-rail-continue-watching',
@@ -639,7 +640,7 @@ test.describe('Electron Settings', () => {
                 await expect(
                     firstLaunch.mainWindow
                         .getByTestId(toggleId)
-                        .locator('input[type="checkbox"]')
+                        .locator('[role="switch"]')
                 ).toBeDisabled();
             }
             await saveSettings(firstLaunch.mainWindow);
@@ -690,12 +691,14 @@ test.describe('Electron Settings', () => {
             await expect(
                 app.mainWindow
                     .getByTestId('toggle-show-dashboard')
-                    .locator('input[type="checkbox"]')
+                    .locator('[role="switch"]')
             ).toBeChecked();
-            await app.mainWindow
-                .getByTestId('toggle-dashboard-rail-recent-sources')
-                .locator('input[type="checkbox"]')
-                .uncheck();
+            await setSwitch(
+                app.mainWindow
+                    .getByTestId('toggle-dashboard-rail-recent-sources')
+                    .locator('[role="switch"]'),
+                false
+            );
             await saveSettings(app.mainWindow);
 
             await goToDashboard(app.mainWindow);
@@ -740,9 +743,9 @@ test.describe('Electron Settings', () => {
 
             const toggle = app.mainWindow
                 .getByTestId('toggle-dashboard-rail-tmdb-recommendations')
-                .locator('input[type="checkbox"]');
+                .locator('[role="switch"]');
             await expect(toggle).toBeChecked();
-            await toggle.uncheck();
+            await setSwitch(toggle, false);
             await saveSettings(app.mainWindow);
         } finally {
             app = await restartElectronApp(app, dataDir);
@@ -754,7 +757,7 @@ test.describe('Electron Settings', () => {
             await expect(
                 app.mainWindow
                     .getByTestId('toggle-dashboard-rail-tmdb-recommendations')
-                    .locator('input[type="checkbox"]')
+                    .locator('[role="switch"]')
             ).not.toBeChecked();
         } finally {
             await closeElectronApp(app);

apps/electron-backend-e2e/src/theme-tokens.e2e.ts

@@ -150,7 +150,12 @@ test.describe('Theme tokens', () => {
                 ).toBeGreaterThanOrEqual(3);
 
                 // A floated label inherits the field's text size and renders
-                // at 75% of it; it must stay legible.
+                // at 75% of it; it must stay legible. The settings selects
+                // have no floating label any more (the row title names
+                // them): the recording folder field on Playback keeps one,
+                // and focusing it floats the label.
+                await openSettingsSection(page, 'playback');
+                await page.locator('#recordingFolder').focus();
                 const floated = page
                     .locator('mat-form-field .mdc-floating-label--float-above')
                     .first();

apps/electron-backend-e2e/src/xtream-epg.e2e.ts

@@ -14,6 +14,7 @@ import {
     openWorkspaceSection,
     resetMockServers,
     saveSettings,
+    setSwitch,
     test,
     waitForStalkerCatalog,
     waitForXtreamWorkspaceReady,
@@ -61,10 +62,12 @@ test('@epg @xtream @electron removes uploaded guide data and restores provider E
         await app.mainWindow
             .locator('.epg-source-row input')
             .fill(source.resourceUrl);
-        await app.mainWindow
-            .getByTestId('toggle-prefer-uploaded-epg')
-            .locator('input')
-            .check();
+        await setSwitch(
+            app.mainWindow
+                .getByTestId('toggle-prefer-uploaded-epg')
+                .getByRole('switch'),
+            true
+        );
         await saveSettings(app.mainWindow);
         await expect
             .poll(