fix(web): polish social UI and prevent doubled shared audio

apps/web/e2e/social-profile.spec.ts

@@ -0,0 +1,43 @@
+import axe from 'axe-core';
+import { expect, test } from '@playwright/test';
+
+for (const { width, light } of [{ width: 390, light: false }, { width: 1280, light: false }, { width: 1280, light: true }]) {
+  test(`social profile settings at ${width}px ${light ? 'light' : 'dark'}`, async ({ page }, info) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
+    await page.goto('/login');
+    await page.getByLabel('Логин', { exact: true }).fill('alice');
+    await page.getByRole('textbox', { name: 'Пароль', exact: true }).fill('alice-password');
+    await page.getByRole('button', { name: 'Войти', exact: true }).click();
+    if (light) await page.evaluate(() => { document.documentElement.dataset.theme = 'light'; });
+    await page.getByRole('button', { name: 'Меню профиля', exact: true }).click();
+    await expect(page.getByRole('menuitem', { name: 'Уведомления', exact: true })).toBeVisible();
+    await page.getByRole('menuitem', { name: 'Моя музыка скрыта', exact: true }).click();
+    const dialog = page.getByRole('dialog', { name: 'Приватность и общение', exact: true });
+    const visibility = dialog.getByRole('group', { name: 'Кто видит мою музыку', exact: true });
+    const friends = visibility.getByRole('button', { name: 'Друзьям', exact: true });
+    await friends.click();
+    await expect(friends).toHaveAttribute('aria-pressed', 'true');
+    await expect(friends).toBeEnabled();
+    await expect(friends).toBeFocused();
+    await dialog.getByText('Слушать вместе', { exact: true }).click();
+    await expect(dialog.getByRole('group', { name: 'Принимать запросы и приглашения от', exact: true })).toBeVisible();
+    expect((await dialog.boundingBox())!.width).toBeLessThanOrEqual(width - 24);
+    await expect.poll(() => dialog.evaluate(element => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(1);
+    await page.addScriptTag({ content: axe.source });
+    const violations = await page.evaluate(async () => {
+      const result = await (window as unknown as { axe: typeof axe }).axe.run(document.querySelector('[role="dialog"]')!, { runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa'] } });
+      return result.violations.map(violation => ({ id: violation.id, nodes: violation.nodes.map(node => node.target) }));
+    });
+    expect(violations).toEqual([]);
+    await page.screenshot({ path: info.outputPath('privacy.png'), fullPage: true });
+    await dialog.getByRole('button', { name: 'Закрыть', exact: true }).click();
+    if (width < 768) await page.getByRole('button', { name: 'Ещё', exact: true }).click();
+    await page.getByRole('link', { name: 'Друзья и общение', exact: true }).click();
+    const heading = page.getByRole('heading', { name: 'Друзья и общение', exact: true });
+    await expect(heading).toBeVisible();
+    expect((await heading.locator('..').boundingBox())!.height).toBeLessThanOrEqual(40);
+    await expect(page.getByRole('button', { name: 'Моя музыка скрыта', exact: true })).toHaveCount(0);
+    await expect(page.getByRole('button', { name: 'Уведомления', exact: true })).toHaveCount(0);
+  });
+}