feat(ui): one dialog frame, a shared dialog shell and three width presets (#1942)

* feat(ui): one dialog frame, a shared dialog shell and three width presets

Every dialog gets the kit frame from m3-theme.scss: a 16px panel on the
widget surface with a hairline border and the popover shadow, over a tinted
backdrop blurred at 6px. The command palette and the programme dialog keep
their own surface through their panel classes.

`app-dialog-shell` (@iptvnator/ui/components) draws the header (optional
icon tile, the heading as mat-dialog-title, subtitle, a header-end slot and
a close button), the body and a footer that renders only when an element
marked appDialogFooter wraps the actions. The close button is last in the
DOM, so first-tabbable autofocus lands in the body. Footer buttons take the
kit look: ghost, accent (new accent-button mixin) or secondary; destructive
buttons keep their tint and get the kit's 10px radius.

`dialogSize('sm' | 'md' | 'lg')` owns the width and viewport limits with a
type-only MatDialogConfig import; MAT_DIALOG_DEFAULT_OPTIONS is deliberately
not provided at the root, which would put Material's dialog back on the
startup path.

Migrated: the confirm dialog (sm), the add-playlist dialog (lg) and the
keyboard shortcuts dialog (lg, close button only). Slot wrappers render as
display: contents, because a control-flow block at the top level of the
content is projected into the body, not into a named slot.

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

* fix(ui): name the dialog shell's close button "Close dialog"

A confirm dialog opened with a "Close" dismiss (the download recovery
prompt, the VOD download prompt) had two buttons named "Close" once the
shell added its header ×, and the Electron download-recovery test failed
on a strict-mode violation for `getByRole('button', { name: 'Close' })`.
The × is now named by the new `CLOSE_DIALOG` key ("Close dialog") in every
locale, so a footer "Close" stays the only button of that name; the same
holds for the dialogs PR 3 migrates, whose E2E flows select "Close".

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

* fix(ui): let short windows scroll the whole dialog shell

With the shell capped at the viewport, a stacked footer (the add-playlist
Xtream mode has five rows) left the body a 40px sliver at 360×480. Under
600px of viewport height the cap comes off and Material's surface scrolls
the whole dialog as the single scroll owner, which is how the dialog
behaved before the shell.

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

---------

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

apps/web-e2e/src/basic.e2e.ts

@@ -65,7 +65,9 @@ test('@web @auto-detect pasted provider message prefills the Xtream form', async
                 '├◉𝙿𝙰𝚂𝚂➤ e2epass'
         );
 
-    const candidate = dialog.locator('[data-test-id="auto-detect-candidate"]').first();
+    const candidate = dialog
+        .locator('[data-test-id="auto-detect-candidate"]')
+        .first();
     await expect(candidate).toBeVisible();
     await expect(candidate.getByText('e2euser')).toBeVisible();
     // The card must never print the password in clear.
@@ -108,7 +110,9 @@ test('@web @auto-detect keeps the pasted message when switching methods', async
     const message = 'Portal: http://stb.example.com/c/\nMAC: 00:1A:79:12:34:56';
     await dialog.locator('[data-test-id="auto-detect-textarea"]').fill(message);
 
-    const candidate = dialog.locator('[data-test-id="auto-detect-candidate"]').first();
+    const candidate = dialog
+        .locator('[data-test-id="auto-detect-candidate"]')
+        .first();
     await expect(candidate.getByText('00:1A:79:12:34:56')).toBeVisible();
     await candidate.locator('[data-test-id="auto-detect-use"]').click();
 
@@ -123,9 +127,9 @@ test('@web @auto-detect keeps the pasted message when switching methods', async
 
     // Returning to auto-detect must not cost the user their paste.
     await dialog.getByRole('radio', { name: /Auto-detect/i }).click();
-    await expect(dialog.locator('[data-test-id="auto-detect-textarea"]')).toHaveValue(
-        message
-    );
+    await expect(
+        dialog.locator('[data-test-id="auto-detect-textarea"]')
+    ).toHaveValue(message);
 });
 
 test('@web @m3u reads an existing v1 IndexedDB playlist after application upgrade', async ({
@@ -299,3 +303,60 @@ test('@web keyboard shortcuts help opens from question mark', async ({
     await page.keyboard.press('Escape');
     await expect(dialog).toBeHidden();
 });
+
+test('@web keyboard shortcuts header fits a phone width', async ({ page }) => {
+    // The shell's header-end slot (the platform chip) wraps under the
+    // heading on narrow windows; neither may run into the close button or
+    // past the panel.
+    // The phone layout folds the header's shortcuts button away, so the
+    // dialog opens at desktop width and the window shrinks around it.
+    await page.goto('/');
+    await page.getByRole('button', { name: 'Open keyboard shortcuts' }).click();
+    const dialog = page.getByRole('dialog');
+    const heading = dialog.getByRole('heading', { name: 'Keyboard shortcuts' });
+    await expect(heading).toBeVisible();
+    await page.setViewportSize({ width: 360, height: 740 });
+    await expect
+        .poll(() => dialog.evaluate((el) => el.getBoundingClientRect().width))
+        .toBeLessThanOrEqual(328);
+    const chip = dialog.locator('.app-dialog__header-end');
+    const close = dialog.getByRole('button', {
+        name: 'Close dialog',
+        exact: true,
+    });
+    await expect(close).toBeVisible();
+
+    const bounds = await dialog.evaluate((el) => {
+        const rect = el.getBoundingClientRect();
+        return {
+            left: rect.left,
+            right: rect.right,
+            overflow: el.scrollWidth - el.clientWidth,
+        };
+    });
+    expect(bounds.overflow).toBeLessThanOrEqual(0);
+    for (const part of [heading, chip, close]) {
+        const rect = await part.evaluate((el) => {
+            const r = el.getBoundingClientRect();
+            return { left: r.left, right: r.right, top: r.top };
+        });
+        expect(rect.left).toBeGreaterThanOrEqual(bounds.left);
+        expect(rect.right).toBeLessThanOrEqual(bounds.right);
+    }
+    const box = (part: typeof heading) =>
+        part.evaluate((el) => {
+            const r = el.getBoundingClientRect();
+            return { x: r.x, y: r.y, width: r.width, height: r.height };
+        });
+    const headingBox = await box(heading);
+    const chipBox = await box(chip);
+    const closeBox = await box(close);
+    // The chip sits below the heading; the close button stays beside it.
+    expect(chipBox.y).toBeGreaterThanOrEqual(
+        headingBox.y + headingBox.height - 1
+    );
+    expect(closeBox.x).toBeGreaterThan(headingBox.x + headingBox.width - 1);
+
+    await page.keyboard.press('Escape');
+    await expect(dialog).toBeHidden();
+});