feat(social): add friends, private chats, inbox and music sharing

apps/web/e2e/playlists.spec.ts

@@ -32,7 +32,9 @@ for (const width of [320, 1280]) {
     await page.getByRole('button', { name: 'Управлять треками' }).click();
     await expect(page.getByRole('button', { name: /Убрать .* из плейлиста/ })).toBeVisible();
     await page.getByRole('button', { name: 'Поделиться плейлистом', exact: true }).click();
-    await expect(page.getByRole('status')).toHaveText('Ссылка на плейлист скопирована');
+    await page.getByRole('dialog').getByRole('button', { name: 'Скопировать ссылку', exact: true }).click();
+    await expect(page.getByRole('button', { name: 'Ссылка скопирована', exact: true })).toBeVisible();
+    await page.getByRole('dialog').getByRole('button', { name: 'Закрыть', exact: true }).click();
     const sharedUrl = await page.evaluate(() => navigator.clipboard.readText());
     const shared = new URL(sharedUrl);
     expect(shared.origin).toBe(new URL(page.url()).origin);
@@ -47,7 +49,9 @@ for (const width of [320, 1280]) {
     await page.getByRole('button', { name: 'Отключить доступ по ссылке', exact: true }).click();
     await expect(page.getByRole('button', { name: 'Отключить доступ по ссылке', exact: true })).toHaveCount(0);
     await page.getByRole('button', { name: 'Поделиться плейлистом', exact: true }).click();
-    await expect(page.getByRole('status')).toHaveText('Ссылка на плейлист скопирована');
+    await page.getByRole('dialog').getByRole('button', { name: 'Скопировать ссылку', exact: true }).click();
+    await expect(page.getByRole('button', { name: 'Ссылка скопирована', exact: true })).toBeVisible();
+    await page.getByRole('dialog').getByRole('button', { name: 'Закрыть', exact: true }).click();
     expect(await page.evaluate(() => navigator.clipboard.readText())).not.toBe(sharedUrl);
 
   });

apps/web/e2e/social.spec.ts

@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+
+for (const width of [320, 800, 1280]) {
+  test(`friends, messages and sharing at ${width}px`, async ({ page }, info) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
+    if (width === 800) await page.addInitScript(() => Object.defineProperty(navigator, 'share', { configurable: true, value: async (data: ShareData) => { sessionStorage.setItem('shared-url', data.url ?? ''); } }));
+    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();
+    const openFriends = async () => {
+      if (width < 768) await page.getByRole('button', { name: 'Ещё', exact: true }).click();
+      await page.getByRole('link', { name: 'Друзья и общение', exact: true }).click();
+    };
+    await openFriends();
+    if (width === 800) await page.evaluate(() => { document.documentElement.dataset.theme = 'light'; });
+    await page.getByRole('button', { name: 'Написать', exact: true }).click();
+    if (width === 800) expect((await page.getByRole('textbox', { name: 'Сообщение', exact: true }).boundingBox())!.width).toBeGreaterThan(180);
+    await page.getByRole('textbox', { name: 'Сообщение', exact: true }).fill('Привет! Нашёл музыку для нашей поездки 🎵');
+    await page.getByRole('button', { name: 'Отправить', exact: true }).click();
+    await expect(page.getByText('Привет! Нашёл музыку для нашей поездки 🎵', { exact: true })).toBeVisible();
+    await expect(page.getByRole('textbox', { name: 'Сообщение', exact: true })).toBeEmpty();
+    await page.screenshot({ path: info.outputPath('conversation.png'), fullPage: true });
+    await page.getByRole('combobox', { name: 'Поиск', exact: true }).fill('кино');
+    await page.getByRole('combobox', { name: 'Поиск', exact: true }).press('Enter');
+    await page.getByRole('listitem').first().click();
+    await page.getByRole('contentinfo', { name: 'Плеер' }).getByRole('button', { name: 'Поделиться треком', exact: true }).click();
+    await expect(page.getByRole('dialog').getByRole('button', { name: 'Скопировать ссылку', exact: true })).toBeVisible();
+    if (width === 800) {
+      await page.getByRole('dialog').getByRole('button', { name: 'Отправить в приложение', exact: true }).click();
+      await expect.poll(() => page.evaluate(() => sessionStorage.getItem('shared-url'))).toContain('/track/');
+    }
+    await page.getByRole('dialog').getByRole('button', { name: 'moderator · Отправить', exact: true }).click();
+    await expect(page.getByRole('button', { name: 'moderator · Отправлено', exact: true })).toBeDisabled();
+    await page.screenshot({ path: info.outputPath('share-music.png') });
+    await page.getByRole('dialog').getByRole('button', { name: 'Закрыть', exact: true }).click();
+    await openFriends();
+    await page.getByRole('button', { name: 'Написать', exact: true }).click();
+    await expect(page.getByRole('link', { name: 'Открыть трек ↗', exact: true })).toBeVisible();
+    await expect.poll(() => page.evaluate(() => {
+      const main = document.querySelector('main')!;
+      return Math.max(document.documentElement.scrollWidth - innerWidth, main.scrollWidth - main.clientWidth);
+    })).toBeLessThanOrEqual(1);
+    await page.getByRole('link', { name: 'Открыть трек ↗', exact: true }).click();
+    await expect(page.getByRole('heading', { name: 'Группа крови', exact: true })).toBeVisible();
+  });
+}