feat(social): add listening activity, shared rooms and modern chat

2026-10-23 10:45:40 +03:00
1 parent 0a05bfe2cd
commit 11a16cd023
@@ -3,6 +3,7 @@ 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.emulateMedia({ reducedMotion: 'reduce' });
    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');
@@ -21,6 +22,10 @@ for (const width of [320, 800, 1280]) {
    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.getByRole('button', { name: 'Действия с сообщением', exact: true }).click();
+    await expect(page.getByRole('menuitem', { name: 'Удалить для всех', exact: true })).toBeVisible();
+    await page.getByRole('menuitem', { name: '❤️', exact: true }).click();
+    await expect(page.getByRole('button', { name: '❤️ 1', exact: true })).toBeVisible();
    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');
@@ -1,4 +1,4 @@
-import { AuthSession } from '@pipu/core';
+import { AuthSession, refreshListening } from '@pipu/core';
 import { createI18n } from '@pipu/i18n';
 import { QueryClient } from '@tanstack/react-query';
 import { createMemoryHistory } from '@tanstack/react-router';
@@ -15,6 +15,74 @@ import { albumTracks, fakeApi, makeUser, type FakeUser } from './test/fakeApi';
 afterEach(cleanup);

 describe('social', () => {
+  it('follows a room with locked playback controls, independent volume and local exit', async () => {
+    const alice = makeUser('alice', 'user'); const bob = makeUser('bob', 'user');
+    const { api, session, user } = await renderApp([alice, bob], '/friends', { signedInAs: alice });
+    const id = crypto.randomUUID();
+    api.listeningRooms.set(id, { id, owner_id: bob.id, owner_name: 'bob', device_id: crypto.randomUUID(), track_id: albumTracks[0]!.id, position_ms: 5000, playing: false, updated_at: new Date().toISOString(), participants: [] });
+    api.listeningMembers.set(alice.id, id); api.listeningMembers.set(bob.id, id);
+    refreshListening(session);
+    await screen.findByText('Слушаете вместе с bob');
+    const player = screen.getByRole('contentinfo', { name: 'Плеер' });
+    await waitFor(() => expect(within(player).getByRole('button', { name: 'Слушать' })).toBeDisabled());
+    expect(within(player).getByRole('slider', { name: 'Громкость' })).toBeEnabled();
+    await user.click(screen.getByRole('button', { name: 'Выйти из прослушивания' }));
+    await waitFor(() => expect(screen.queryByText('Слушаете вместе с bob')).not.toBeInTheDocument());
+    expect(api.listeningMembers.has(alice.id)).toBe(false);
+  });
+  it('edits, replies, reacts, searches, deletes and preserves a minimized draft', async () => {
+    const alice = makeUser('alice', 'user'); const bob = makeUser('bob', 'user');
+    const { api, user, queryClient } = await renderApp([alice, bob], '/friends', { signedInAs: alice });
+    api.friendships.set([alice.id, bob.id].sort().join(':'), { sender: bob.id, accepted: true });
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    await user.click(await screen.findByRole('button', { name: 'Написать' }));
+    const composer = () => screen.getByRole('textbox', { name: 'Сообщение' });
+    await user.type(composer(), 'Первый вариант');
+    await user.click(screen.getByRole('button', { name: 'Отправить' }));
+    await screen.findByText('Первый вариант');
+    const actions = async (name: string) => {
+      await user.click((await screen.findAllByRole('button', { name: 'Действия с сообщением' }))[0]!);
+      await user.click(await screen.findByRole('menuitem', { name }));
+    };
+    await actions('Редактировать');
+    await user.clear(composer()); await user.type(composer(), 'Исправленный текст');
+    await user.click(screen.getByRole('button', { name: 'Сохранить' }));
+    await screen.findByText('Исправленный текст', { exact: true });
+    await actions('❤️');
+    await screen.findByRole('button', { name: '❤️ 1' });
+    await actions('Ответить');
+    await user.type(composer(), 'Ответ на музыку');
+    await user.click(screen.getByRole('button', { name: 'Отправить' }));
+    await waitFor(() => expect(api.messages).toHaveLength(2));
+    expect(api.messages[1]?.reply_to).toBe(api.messages[0]?.id);
+    await user.type(screen.getByRole('searchbox', { name: 'Поиск в переписке' }), 'Исправленный');
+    await waitFor(() => expect(screen.queryByText('Ответ на музыку', { exact: true })).not.toBeInTheDocument());
+    await actions('Удалить для всех');
+    await waitFor(() => expect(api.messages[0]?.deleted).toBe(true));
+    await user.clear(screen.getByRole('searchbox', { name: 'Поиск в переписке' }));
+    await user.type(composer(), 'Мой черновик');
+    await user.click(screen.getByRole('button', { name: 'Свернуть чат' }));
+    expect(screen.queryByRole('textbox', { name: 'Сообщение' })).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'bob' }));
+    expect(composer()).toHaveValue('Мой черновик');
+  });
+
+  it('saves privacy and independent request admission preferences', async () => {
+    const alice = makeUser('alice', 'user');
+    const { api, user } = await renderApp([alice], '/friends', { signedInAs: alice });
+    const privacy = await screen.findByRole('group', { name: 'Показывать мой статус' });
+    expect(within(privacy).getByRole('button', { name: 'Никому' })).toHaveAttribute('aria-pressed', 'true');
+    await user.click(within(privacy).getByRole('button', { name: 'Друзьям' }));
+    await waitFor(() => expect(api.activityVisibility.get(alice.id)).toBe('friends'));
+    await user.click(screen.getByText('Слушать вместе', { exact: true }));
+    const requests = await screen.findByRole('group', { name: 'Принимать запросы и приглашения от' });
+    const auto = screen.getByRole('group', { name: 'Автоматически принимать от' });
+    await user.click(within(requests).getByRole('button', { name: 'Друзьям' }));
+    await waitFor(() => expect(api.listeningPreferences.get(alice.id)?.requests).toBe('friends'));
+    await waitFor(() => expect(within(auto).getByRole('button', { name: 'Всем' })).toBeEnabled());
+    await user.click(within(auto).getByRole('button', { name: 'Всем' }));
+    await waitFor(() => expect(api.listeningPreferences.get(alice.id)).toMatchObject({ requests: 'friends', auto_accept: 'everyone' }));
+  });
  it('shows persistent notifications and acknowledges only the chosen event', async () => {
    const alice = makeUser('alice', 'user');
    const bob = makeUser('bob', 'user');
@@ -26,7 +26,7 @@ import { ConnectPage } from '../pages/ConnectPage';
 import { TrackPage } from '../pages/TrackPage';
 import { ArtistPage } from '../pages/ArtistPage';
 import { CollectionPage } from '../pages/CollectionPage';
-import { PlaylistPage, PlaylistsPage } from '../pages/PlaylistsPage';
+import { ActivityPlaylistPage, PlaylistPage, PlaylistsPage } from '../pages/PlaylistsPage';
 import { HomePage } from '../pages/HomePage';
 import { AppDownloadPage } from '../pages/AppDownloadPage';
 import { LoginPage } from '../pages/LoginPage';
@@ -148,6 +148,7 @@ const adminOnly = ({ context }: { context: { user: AuthUser } }) => {
 };

 const homeRoute = createRoute({ getParentRoute: () => appRoute, path: '/', component: HomePage });
+const activityPlaylistRoute = createRoute({ getParentRoute: () => appRoute, path: '/activity/playlist/$userId', component: () => <ActivityPlaylistPage key={activityPlaylistRoute.useParams().userId} userId={activityPlaylistRoute.useParams().userId} /> });
 const socialRoute = createRoute({ getParentRoute: () => appRoute, path: '/friends', validateSearch: (s: Record<string, unknown>): { peer?: string } => typeof s.peer === 'string' ? { peer: s.peer } : {}, component: () => <SocialPage peer={socialRoute.useSearch().peer} /> });
 const trackRoute = createRoute({ getParentRoute: () => appRoute, path: '/track/$id', component: () => <TrackPage key={trackRoute.useParams().id} id={trackRoute.useParams().id} /> });
 const sharedPlaylistRoute = createRoute({ getParentRoute: () => appRoute, path: '/shared/playlist/$shareId', component: () => <PlaylistPage key={sharedPlaylistRoute.useParams().shareId} id={sharedPlaylistRoute.useParams().shareId} shared /> });
@@ -295,6 +296,7 @@ const routeTree = rootRoute.addChildren([
  setupPasswordRoute,
  appRoute.addChildren([
    homeRoute,
+    activityPlaylistRoute,
    socialRoute,
    trackRoute,
    playlistsRoute,
@@ -0,0 +1,89 @@
+import { attachmentPath, CHAT_REACTIONS, chatDraftKey, uuidv7, type ChatMessageUpdate, type DirectMessage, type SocialPerson, type socialApi } from '@pipu/core';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDesktop } from '../../desktop';
+import { useErrorText } from '../../shared/lib/errors';
+import { Button, Field, FormError, Menu } from '../../shared/ui/ui';
+import s from './social.module.css';
+
+export function ChatConversation({ person, api, queryKey, userId, compact = false, active = true }: { person: SocialPerson; api: ReturnType<typeof socialApi>; queryKey: readonly unknown[]; userId: string; compact?: boolean; active?: boolean }) {
+  const { t, i18n } = useTranslation(); const cache = useQueryClient(); const errorText = useErrorText();
+  const server = useDesktop()?.server ?? window.location.origin;
+  const draftKey = chatDraftKey(server, userId, person.id);
+  const [text, setText] = useState(() => { try { return localStorage.getItem(draftKey) ?? ''; } catch { return ''; } });
+  const [reply, setReply] = useState<DirectMessage | null>(null); const [editing, setEditing] = useState<DirectMessage | null>(null);
+  const [search, setSearch] = useState(''); const [q, setQ] = useState(''); const [emojis, setEmojis] = useState(false);
+  const beforeEdit = useRef(''); const pending = useRef<{ id: string; text: string; reply_to?: string } | null>(null);
+  const typedAt = useRef(0);
+  const [visible, setVisible] = useState(document.visibilityState === 'visible');
+  useEffect(() => { const change = () => setVisible(document.visibilityState === 'visible'); document.addEventListener('visibilitychange', change); return () => document.removeEventListener('visibilitychange', change); }, []);
+  useEffect(() => { const timer = setTimeout(() => setQ(search.trim()), 250); return () => clearTimeout(timer); }, [search]);
+  useEffect(() => {
+    if (editing) return;
+    const timer = setTimeout(() => { try { if (text) localStorage.setItem(draftKey, text); else localStorage.removeItem(draftKey); } catch { /* Private mode can deny storage. */ } }, 250);
+    return () => clearTimeout(timer);
+  }, [text, draftKey, editing]);
+  useEffect(() => {
+    const timer = setTimeout(() => { void api.typing(person.id, active && visible && !!text.trim() && !editing && Date.now() - typedAt.current < 6000).catch(() => undefined); }, 400);
+    return () => clearTimeout(timer);
+  }, [text, active, visible, editing, person.id, api]);
+  useEffect(() => () => { void api.typing(person.id, false).catch(() => undefined); }, [api, person.id]);
+  const meta = useQuery({ queryKey: [...queryKey, 'typing', person.id], queryFn: () => api.chatMeta(person.id), enabled: active && visible, refetchInterval: active && visible ? 2000 : false });
+  const messages = useInfiniteQuery({ queryKey: [...queryKey, 'chat', person.id, q], initialPageParam: undefined as number | undefined,
+    queryFn: ({ pageParam }) => api.messages(person.id, pageParam, q), getNextPageParam: last => last.length === 50 ? last[0]?.seq : undefined, enabled: active, refetchInterval: active && visible ? 3000 : false });
+  const list = [...(messages.data?.pages ?? [])].reverse().flat(); const last = list.at(-1)?.seq;
+  const firstUnread = list.find(m => m.sender_id !== userId && !m.read)?.id;
+  useEffect(() => {
+    if (last && firstUnread && visible && active && !q) void api.action({ action: 'read_chat', target_id: person.id, up_to_seq: last }).then(() => cache.invalidateQueries({ queryKey })).catch(() => undefined);
+  }, [last, firstUnread, visible, active, q, api, person.id, cache, messages.dataUpdatedAt]);
+  const end = useRef<HTMLDivElement>(null);
+  useEffect(() => { if (active && !q) end.current?.scrollIntoView?.({ block: 'nearest' }); }, [last, active, q]);
+  const refresh = () => cache.invalidateQueries({ queryKey });
+  const update = useMutation({ mutationFn: (input: { id: string; body: ChatMessageUpdate }) => api.updateMessage(person.id, input.id, input.body), onSuccess: refresh });
+  const send = useMutation({ mutationFn: async () => {
+    if (editing) { await api.updateMessage(person.id, editing.id, { action: 'edit', text }); return; }
+    if (!pending.current || pending.current.text !== text || pending.current.reply_to !== reply?.id) pending.current = { id: uuidv7(), text, ...(reply ? { reply_to: reply.id } : {}) };
+    await api.send(person.id, { ...pending.current, attachment_kind: 'none' });
+  }, onSuccess: async () => { setText(editing ? beforeEdit.current : ''); setEditing(null); setReply(null); pending.current = null; await refresh(); } });
+  const cancelEdit = () => { setText(beforeEdit.current); setEditing(null); };
+  const mutate = (id: string, body: ChatMessageUpdate) => { if (!update.isPending) update.mutate({ id, body }); };
+  return <section className={s.chat} aria-label={t('social.chat')}>
+    {!compact && <header><strong>{person.display_name}</strong><p className={s.muted}>{t('social.chat_hint')}</p></header>}
+    <div className={s.chatSearch}><Field label={t('social.chat_search')} value={search} onChange={setSearch} type="search" maxLength={100} /></div>
+    <FormError>{messages.error || send.error || update.error ? errorText(messages.error ?? send.error ?? update.error) : null}</FormError>
+    <div className={s.messages}>
+      {messages.hasNextPage && <Button busy={messages.isFetchingNextPage} onClick={() => void messages.fetchNextPage()}>{t('social.older')}</Button>}
+      {messages.isPending && <p>{t('social.loading')}</p>}
+      {!list.length && messages.isSuccess && <p className={s.empty}>{t(q ? 'social.chat_no_results' : 'social.first_message')}</p>}
+      {list.map((m, i) => <Fragment key={m.id}>
+        {(i === 0 || new Date(list[i - 1]!.created_at).toDateString() !== new Date(m.created_at).toDateString()) && <time className={s.date}>{new Date(m.created_at).toLocaleDateString(i18n.language, { day: 'numeric', month: 'long', year: 'numeric' })}</time>}
+        {m.id === firstUnread && !q && <div className={s.date}>{t('social.new_messages')}</div>}
+        <article id={`message-${m.id}`} className={`${s.bubble} ${m.sender_id === userId ? s.mine : ''} ${m.deleted ? s.deleted : ''}`}>
+          {m.reply_to && <blockquote className={s.quote}>{m.reply_preview || t('social.message_deleted')}</blockquote>}
+          <div className={s.messageText}>{m.deleted ? t('social.message_deleted') : m.text}</div>
+          {!m.deleted && attachmentPath(m) && <Link className={s.music} to={m.attachment_kind === 'track' ? '/track/$id' : '/shared/playlist/$shareId'} params={{ id: m.attachment_id!, shareId: m.attachment_id! }}>{t(m.attachment_kind === 'track' ? 'social.listen_track' : 'social.listen_playlist')} ↗</Link>}
+          {!m.deleted && !!m.reactions?.length && <div className={s.reactions}>{m.reactions.map(r => <button key={r.emoji} type="button" aria-pressed={r.mine} disabled={update.isPending} onClick={() => mutate(m.id, { action: 'react', emoji: r.emoji as typeof CHAT_REACTIONS[number] })}>{r.emoji} {r.count}</button>)}</div>}
+          <div className={s.messageFoot}><small className={s.muted}>{new Date(m.created_at).toLocaleTimeString(i18n.language, { hour: '2-digit', minute: '2-digit' })}{m.edited_at && !m.deleted ? ` · ${t('social.edited')}` : ''}{m.sender_id === userId ? ` · ${t(m.read ? 'social.read' : 'social.sent')}` : ''}</small>
+            {!m.deleted && <Menu portal label={t('social.message_actions')} trigger="•••" items={[
+              { label: t('social.reply'), onSelect: () => { if (editing) cancelEdit(); setReply(m); } },
+              ...CHAT_REACTIONS.map(emoji => ({ label: emoji, onSelect: () => mutate(m.id, { action: 'react', emoji }) })),
+              ...(m.sender_id === userId ? [{ label: t('social.edit_message'), onSelect: () => { beforeEdit.current = text; setEditing(m); setReply(null); setText(m.text); } }, { label: t('social.delete_message'), danger: true, onSelect: () => mutate(m.id, { action: 'delete' }) }] : []),
+            ]} />}
+          </div>
+        </article>
+      </Fragment>)}
+      {send.isPending && !editing && !list.some(m => m.id === pending.current?.id) && <article className={`${s.bubble} ${s.mine} ${s.sending}`} role="status">{text} · …</article>}
+      <div ref={end} />
+    </div>
+    <div className={s.typing} role="status" aria-live="polite">{active && meta.data?.typing ? `${person.display_name} ${t('social.typing')}` : ''}</div>
+    {(reply || editing) && <div className={s.replyBar}><div><small>{t(editing ? 'social.editing' : 'social.replying')}</small><p>{(editing ?? reply)?.text}</p></div><Button variant="ghost" onClick={() => editing ? cancelEdit() : setReply(null)} aria-label={t(editing ? 'social.cancel_edit' : 'social.cancel_reply')}>×</Button></div>}
+    <form className={s.composer} onSubmit={e => { e.preventDefault(); if (text.trim() && !send.isPending) send.mutate(); }}>
+      <textarea aria-label={t('social.message')} placeholder={t('social.message')} maxLength={4000} rows={2} value={text} disabled={send.isPending} onChange={e => { typedAt.current = Date.now(); setText(e.target.value); }} onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); if (text.trim() && !send.isPending) send.mutate(); } }} />
+      <Button variant="ghost" aria-label={t('social.emoji')} aria-expanded={emojis} onClick={() => setEmojis(v => !v)}>☺</Button>
+      {emojis && <div className={s.reactions}>{CHAT_REACTIONS.map(emoji => <button key={emoji} type="button" onClick={() => { setText(v => (v + emoji).slice(0, 4000)); setEmojis(false); }}>{emoji}</button>)}</div>}
+      <Button type="submit" variant="primary" busy={send.isPending} disabled={!text.trim()}>{t(editing ? 'playlists.save' : 'social.send')}</Button>
+    </form>
+  </section>;
+}
@@ -0,0 +1,61 @@
+import { socialApi, uuidv7, type ListeningPreferences, type SocialPerson } from '@pipu/core';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSession, useUser } from '../../app/session';
+import { useDesktop } from '../../desktop';
+import { usePlayer, usePlayerState } from '../../player/context';
+import { useErrorText } from '../../shared/lib/errors';
+import { Button, Dialog, FormError } from '../../shared/ui/ui';
+import s from './social.module.css';
+
+function useListening() {
+  const session = useSession(); const user = useUser(); const server = useDesktop()?.server ?? '';
+  const api = useMemo(() => socialApi(session), [session]);
+  const key = ['listening', server, user.id] as const;
+  const query = useQuery({ queryKey: key, queryFn: api.listening, refetchInterval: 3000 });
+  return { api, key, query, user };
+}
+export function ListeningPanel() {
+  const { t } = useTranslation(); const errorText = useErrorText(); const cache = useQueryClient();
+  const { api, key, query, user } = useListening();
+  const prefs = query.data?.preferences;
+  const save = useMutation({ mutationFn: (body: ListeningPreferences) => api.setListeningPreferences(body), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  const action = useMutation({ mutationFn: (input: { action: 'accept' | 'decline' | 'cancel'; target: string }) => api.listeningAction({ id: uuidv7(), action: input.action, target_id: input.target }), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  return <div className={s.stack}>
+    <details className={s.privacy}><summary>{t('social.together')}</summary><p className={s.muted}>{t('social.stream_prefs_hint')}</p>
+      {(['requests', 'auto_accept'] as const).map(field => <fieldset key={field} className={s.privacy} disabled={!prefs || save.isPending}><legend>{t(field === 'requests' ? 'social.stream_requests' : 'social.stream_auto')}</legend><div className={s.actions}>{(['nobody', 'friends', 'everyone'] as const).map(v => <Button key={v} aria-pressed={(prefs?.[field] ?? 'nobody') === v} variant={(prefs?.[field] ?? 'nobody') === v ? 'primary' : 'ghost'} onClick={() => prefs && save.mutate({ ...prefs, [field]: v })}>{t(`social.visibility_${v}`)}</Button>)}</div></fieldset>)}
+      <label><input type="checkbox" checked={prefs?.autoplay ?? true} disabled={!prefs || save.isPending} onChange={e => prefs && save.mutate({ ...prefs, autoplay: e.target.checked })} /> {t('social.stream_autoplay')}</label>
+    </details>
+    {query.data?.requests.map(r => <article key={r.id} className={s.person}><strong>{r.recipient_id === user.id ? t(r.kind === 'join' ? 'social.stream_incoming_join' : 'social.stream_incoming_invite', { name: r.sender_name }) : t('social.stream_pending')}</strong><div className={s.actions}>{r.recipient_id === user.id ? <><Button disabled={action.isPending} onClick={() => action.mutate({ action: 'accept', target: r.id })}>{t('social.accept')}</Button><Button disabled={action.isPending} variant="ghost" onClick={() => action.mutate({ action: 'decline', target: r.id })}>{t('social.decline')}</Button></> : <Button disabled={action.isPending} variant="ghost" onClick={() => action.mutate({ action: 'cancel', target: r.id })}>{t('form.cancel')}</Button>}</div></article>)}
+    <FormError>{query.error || save.error || action.error ? errorText(query.error ?? save.error ?? action.error) : null}</FormError>
+  </div>;
+}
+export function ListenTogetherButton({ person }: { person: SocialPerson }) {
+  const { t } = useTranslation(); const [open, setOpen] = useState(false);
+  return <><Button variant="ghost" onClick={() => setOpen(true)}>{t('social.together')}</Button>{open && <ListenTogetherDialog person={person} close={() => setOpen(false)} />}</>;
+}
+function ListenTogetherDialog({ person, close }: { person: SocialPerson; close: () => void }) {
+  const { t } = useTranslation(); const errorText = useErrorText(); const cache = useQueryClient();
+  const { api, key } = useListening(); const state = usePlayerState();
+  const [kind, setKind] = useState<'join' | 'invite'>(person.activity ? 'join' : 'invite');
+  const [id] = useState(uuidv7);
+  const action = useMutation({ mutationFn: () => api.listeningAction({ id, action: kind, target_id: person.id }), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  return <Dialog title={t('social.together')} onClose={close}><strong>{person.display_name}</strong><fieldset className={s.privacy} disabled={action.isPending || action.isSuccess}><legend>{t('social.stream_choice')}</legend>
+    <label className={s.choice}><input type="radio" checked={kind === 'join'} disabled={!person.activity} onChange={() => setKind('join')} />{t('social.join_stream')}</label>
+    <label className={s.choice}><input type="radio" checked={kind === 'invite'} disabled={!state.track || state.listening?.locked} onChange={() => setKind('invite')} />{t('social.invite_stream')}</label>
+  </fieldset><p className={s.muted}>{t('social.stream_hint')}</p>
+    <FormError>{action.error ? errorText(action.error) : null}</FormError>
+    {action.isSuccess ? <p role="status">{t(kind === 'join' ? 'social.stream_request_sent' : 'social.stream_invite_sent')}</p> : <Button variant="primary" busy={action.isPending} disabled={kind === 'join' ? !person.activity : !state.track || state.listening?.locked} onClick={() => action.mutate()}>{t('social.send')}</Button>}
+  </Dialog>;
+}
+export function ListeningBanner() {
+  const { t } = useTranslation(); const state = usePlayerState(); const player = usePlayer();
+  const session = useSession(); const errorText = useErrorText(); const room = state.listening?.room;
+  const action = useMutation({ mutationFn: async () => room && socialApi(session).listeningAction({ id: uuidv7(), action: room.owner_id === (session.state.status === 'signed_in' ? session.state.user.id : '') ? 'end' : 'leave', target_id: room.id }) });
+  if (!room) return null;
+  return <section className={s.stream} aria-label={t('social.together')}><div><strong>{t(state.listening?.locked ? 'social.stream_following' : 'social.stream_host', { name: room.owner_name })}</strong><p className={s.muted}>{t(state.listening?.disconnected ? 'social.stream_lost' : state.listening?.needsStart ? 'social.stream_waiting_audio' : 'social.stream_controls')}</p><details><summary>{t('social.stream_listeners', { count: Math.max(0, room.participants.length - 1) })}</summary>{room.participants.map(p => <div key={p.id}>{p.name}</div>)}</details></div>
+    <div className={s.actions}>{state.listening?.locked && !state.playing && !state.listening.disconnected && <Button onClick={() => player.beginListeningAudio()}>{t('social.stream_start_audio')}</Button>}<Button busy={action.isPending} variant="ghost" onClick={() => action.mutate()}>{t(room.owner_id === (session.state.status === 'signed_in' ? session.state.user.id : '') ? 'social.stream_end' : 'social.stream_leave')}</Button></div>
+    <FormError>{action.error ? errorText(action.error) : null}</FormError>
+  </section>;
+}
@@ -1,6 +1,6 @@
-import { attachmentPath, socialApi, uuidv7, type MusicAttachment, type SocialAction, type SocialPerson } from '@pipu/core';
+import { attachmentPath, socialApi, uuidv7, type ActivityVisibility, type MusicAttachment, type SocialAction, type SocialPerson } from '@pipu/core';
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Link, useNavigate } from '@tanstack/react-router';
+import { Link, useNavigate, useRouterState } from '@tanstack/react-router';
 import { createContext, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSession, useUser } from '../../app/session';
@@ -8,6 +8,8 @@ import { useDesktop } from '../../desktop';
 import { useErrorText } from '../../shared/lib/errors';
 import { Button, Dialog, Field, FormError } from '../../shared/ui/ui';
 import s from './social.module.css';
+import { ListeningPanel, ListenTogetherButton } from './Listening';
+import { ChatConversation } from './ChatConversation';

 const scopes = new WeakMap<object, number>();
 let nextScope = 0;
@@ -25,12 +27,35 @@ function useSocial() {

 export function useSocialUnread() { return useSocial().inbox.data?.unread ?? 0; }

+export function FriendRecommendations() {
+  const { api, inbox, key } = useSocial(); const cache = useQueryClient(); const { t } = useTranslation(); const errorText = useErrorText();
+  const save = useMutation({ mutationFn: api.setFriendsRecommendations, onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  return <div><label><input type="checkbox" checked={inbox.data?.friends_recommendations ?? true} disabled={!inbox.data || save.isPending} onChange={e => save.mutate(e.target.checked)} /> {t('social.friends_recommendations')}</label><p className={s.muted}>{t('social.friends_recommendations_hint')}</p><FormError>{save.error ? errorText(save.error) : null}</FormError></div>;
+}
+
 type ShareValue = { attachment: MusicAttachment; url: string };
 const ShareContext = createContext<(value: ShareValue) => void>(() => { throw new Error('Missing SocialProvider'); });
+const ChatContext = createContext<(id: string) => void>(() => {});
 export const useMusicShare = () => useContext(ShareContext);
 export function SocialProvider({ children }: { children: ReactNode }) {
  const [share, setShare] = useState<ShareValue | null>(null);
-  return <ShareContext.Provider value={setShare}>{children}{share && <ShareDialog key={share.url} value={share} close={() => setShare(null)} />}</ShareContext.Provider>;
+  const [chat, setChat] = useState<{ peer: string | null; open: boolean }>({ peer: null, open: false });
+  return <ShareContext.Provider value={setShare}><ChatContext.Provider value={id => setChat({ peer: id, open: true })}>{children}<ChatDock chat={chat} change={setChat} />{share && <ShareDialog key={share.url} value={share} close={() => setShare(null)} />}</ChatContext.Provider></ShareContext.Provider>;
+}
+
+function ChatDock({ chat, change }: { chat: { peer: string | null; open: boolean }; change: (value: { peer: string | null; open: boolean }) => void }) {
+  const { inbox } = useSocial(); const { t } = useTranslation();
+  const friends = inbox.data?.people.filter(p => p.relationship === 'friend') ?? [];
+  const selected = friends.find(p => p.id === chat.peer);
+  const unread = friends.reduce((sum, p) => sum + p.unread, 0);
+  const pathname = useRouterState({ select: state => state.location.pathname });
+  useEffect(() => { if (window.matchMedia?.('(max-width: 1023px)').matches) change({ ...chat, open: false }); }, [pathname]);
+  return <aside className={`${s.dock} ${chat.open ? s.dockOpen : ''}`} aria-label={t('social.messages')}>
+    <div className={s.dockHeader}><button type="button" aria-expanded={chat.open} onClick={() => change({ ...chat, open: !chat.open })}>{selected?.display_name ?? t('social.messages')}{unread ? ` · ${unread}` : ''}</button>{chat.open && <><button type="button" onClick={() => change({ peer: null, open: true })} aria-label={t('social.people')}>☰</button><button type="button" onClick={() => change({ ...chat, open: false })} aria-label={t('social.minimize')}>−</button></>}</div>
+    <div hidden={!chat.open}>
+      {selected ? <Chat key={selected.id} person={selected} compact active={chat.open} /> : <div className={s.dockList}>{friends.map(p => <button key={p.id} type="button" onClick={() => change({ peer: p.id, open: true })}><span className={s.avatar} aria-hidden>{p.display_name.slice(0, 1).toUpperCase()}</span><span>{p.display_name}</span>{p.unread ? <small>{p.unread}</small> : null}</button>)}{!friends.length && <p className={s.empty}>{t('social.no_friends_share')}</p>}</div>}
+    </div>
+  </aside>;
 }
 function ShareDialog({ value, close }: { value: ShareValue; close: () => void }) {
  const { t } = useTranslation();
@@ -70,6 +95,7 @@ export function SocialPage({ peer = '' }: { peer?: string }) {
  const { api, inbox, key } = useSocial();
  const cache = useQueryClient();
  const navigate = useNavigate();
+  const showChat = useContext(ChatContext);
  const errorText = useErrorText();
  const [tab, setTab] = useState<'people' | 'notifications'>('people');
  const [search, setSearch] = useState('');
@@ -77,11 +103,18 @@ export function SocialPage({ peer = '' }: { peer?: string }) {
  useEffect(() => { const timer = setTimeout(() => setQ(search.trim()), 300); return () => clearTimeout(timer); }, [search]);
  const results = useQuery({ queryKey: [...key, 'search', q], queryFn: () => api.search(q), enabled: q.length >= 2 });
  const action = useMutation({ mutationFn: (body: SocialAction) => api.action(body), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
-  const selected = inbox.data?.people.find(p => p.id === peer && p.relationship === 'friend');
+  const visibility = useMutation({ mutationFn: (v: ActivityVisibility) => api.setVisibility(v), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
  const people = q.length >= 2 ? results.data ?? [] : inbox.data?.people ?? [];
-  const open = (id: string) => { setTab('people'); setSearch(''); setQ(''); void navigate({ to: '/friends', search: { peer: id } }); };
+  const open = (id: string) => { setTab('people'); setSearch(''); setQ(''); if (inbox.data?.people.some(p => p.id === id && p.relationship === 'friend')) showChat(id); else void navigate({ to: '/friends', search: { peer: id } }); };
  return <div className={s.page}>
    <header><h1>{t('social.title')}</h1><p className={s.muted}>{t('social.subtitle')}</p></header>
+    <fieldset className={s.privacy} disabled={!inbox.data || visibility.isPending}>
+      <legend>{t('social.activity_visibility')}</legend>
+      <div className={s.actions}>{(['nobody', 'friends', 'everyone'] as const).map(v => <Button key={v} aria-pressed={(inbox.data?.activity_visibility ?? 'nobody') === v} variant={(inbox.data?.activity_visibility ?? 'nobody') === v ? 'primary' : 'ghost'} onClick={() => visibility.mutate(v)}>{t(`social.visibility_${v}`)}</Button>)}</div>
+      <p className={s.muted}>{t('social.activity_privacy_hint')}</p>
+      <FormError>{visibility.error ? errorText(visibility.error) : null}</FormError>
+    </fieldset>
+    <ListeningPanel />
    <nav className={s.tabs} aria-label={t('social.title')}>
      <Button variant={tab === 'people' ? 'primary' : 'ghost'} onClick={() => setTab('people')}>{t('social.people')}</Button>
      <Button variant={tab === 'notifications' ? 'primary' : 'ghost'} onClick={() => setTab('notifications')}>{t('social.notifications')} {inbox.data?.unread || ''}</Button>
@@ -94,14 +127,13 @@ export function SocialPage({ peer = '' }: { peer?: string }) {
        <div><strong>{n.actor_name}</strong><p>{t(`social.kind_${n.kind}`)}</p><time className={s.muted}>{new Date(n.created_at).toLocaleString()}</time></div>
        <div className={s.actions}><Button onClick={() => open(n.actor_id)}>{t('social.open')}</Button>{!n.read && <Button disabled={action.isPending} onClick={() => action.mutate({ action: 'read_notification', target_id: n.id })}>{t('social.mark_read')}</Button>}</div>
      </article>)}
-    </div> : <div className={s.layout}>
+    </div> : <div>
      <aside className={s.stack}>
        <Field label={t('social.search')} value={search} onChange={setSearch} type="search" maxLength={80} />
        {q.length >= 2 && results.isFetching && <p role="status">{t('social.loading')}</p>}
        {!people.length && inbox.data && !results.isFetching && <p className={s.empty}>{t(q.length >= 2 ? 'social.no_results' : 'social.empty')}</p>}
        {people.map(p => <Person key={p.id} person={p} selected={peer === p.id} busy={action.isPending} open={() => open(p.id)} act={a => action.mutate({ action: a, target_id: p.id })} />)}
      </aside>
-      {selected ? <Chat key={selected.id} person={selected} /> : <div className={s.empty}>{t('social.choose_chat')}</div>}
    </div>}
  </div>;
 }
@@ -109,8 +141,16 @@ function Person({ person: p, busy, open, act, selected }: { person: SocialPerson
  const { t } = useTranslation();
  return <article className={`${s.person} ${selected ? s.selected : ''}`}>
    <div className={s.identity}><span className={s.avatar} aria-hidden>{p.display_name.slice(0, 1).toUpperCase()}</span><div><strong>{p.display_name}</strong><div className={s.muted}>@{p.username} · {t(`social.rel_${p.relationship}`)}</div></div></div>
+    {p.activity && <div className={s.activity}>
+      <span className={s.listening}>{t('social.listening')}</span>
+      <Link to="/track/$id" params={{ id: p.activity.track_id }}>{p.activity.track_title}</Link>
+      {p.activity.artist && <span className={s.muted}>{p.activity.artist}</span>}
+      {p.activity.context === 'wave' && <span className={s.muted}>{t('wave.title')}</span>}
+      {p.activity.context === 'playlist' && p.activity.playlist_id && <Link to="/activity/playlist/$userId" params={{ userId: p.id }}>{t('social.from_playlist', { name: p.activity.playlist_name ?? '' })}</Link>}
+    </div>}
    <div className={s.actions}>
      {p.relationship === 'friend' && <Button onClick={open}>{t('social.chat')}{p.unread ? ` · ${p.unread}` : ''}</Button>}
+      {p.relationship === 'friend' && <ListenTogetherButton person={p} />}
      {p.relationship === 'none' && <Button disabled={busy} onClick={() => act('request')}>{t('social.add')}</Button>}
      {p.relationship === 'incoming' && <Button disabled={busy} variant="primary" onClick={() => act('accept')}>{t('social.accept')}</Button>}
      {['incoming', 'outgoing', 'friend'].includes(p.relationship) && <Button disabled={busy} variant="ghost" onClick={() => act('remove')}>{t(p.relationship === 'incoming' ? 'social.decline' : p.relationship === 'outgoing' ? 'social.cancel' : 'social.remove')}</Button>}
@@ -118,48 +158,7 @@ function Person({ person: p, busy, open, act, selected }: { person: SocialPerson
    </div>
  </article>;
 }
-function Chat({ person }: { person: SocialPerson }) {
-  const { t } = useTranslation();
-  const { api, key, user } = useSocial();
-  const cache = useQueryClient();
-  const errorText = useErrorText();
-  const [text, setText] = useState('');
-  const pending = useRef<{ id: string; text: string } | null>(null);
-  const messages = useInfiniteQuery({ queryKey: [...key, 'chat', person.id], initialPageParam: undefined as number | undefined,
-    queryFn: ({ pageParam }) => api.messages(person.id, pageParam), getNextPageParam: last => last.length === 50 ? last[0]?.seq : undefined, refetchInterval: 8_000 });
-  const list = [...(messages.data?.pages ?? [])].reverse().flat();
-  const last = list.at(-1)?.seq;
-  const unread = list.some(m => m.sender_id !== user.id && !m.read);
-  const [visible, setVisible] = useState(document.visibilityState === 'visible');
-  useEffect(() => { const change = () => setVisible(document.visibilityState === 'visible'); document.addEventListener('visibilitychange', change); return () => document.removeEventListener('visibilitychange', change); }, []);
-  useEffect(() => {
-    if (!last || !unread || !visible) return;
-    let cancelled = false;
-    void api.action({ action: 'read_chat', target_id: person.id, up_to_seq: last }).then(() => { if (!cancelled) void cache.invalidateQueries({ queryKey: key }); }).catch(() => undefined);
-    return () => { cancelled = true; };
-  }, [last, unread, visible, api, person.id, cache, user.id, messages.dataUpdatedAt]);
-  const end = useRef<HTMLDivElement>(null);
-  useEffect(() => { end.current?.scrollIntoView?.({ block: 'nearest' }); }, [last]);
-  const send = useMutation({ mutationFn: async () => {
-    if (!pending.current || pending.current.text !== text) pending.current = { id: uuidv7(), text };
-    return api.send(person.id, { ...pending.current, attachment_kind: 'none' });
-  }, onSuccess: async () => { setText(''); pending.current = null; await cache.invalidateQueries({ queryKey: key }); } });
-  return <section className={s.chat} aria-label={t('social.chat')}>
-    <header><strong>{person.display_name}</strong><p className={s.muted}>{t('social.chat_hint')}</p></header>
-    <FormError>{messages.error || send.error ? errorText(messages.error ?? send.error) : null}</FormError>
-    <div className={s.messages}>
-      {messages.hasNextPage && <Button busy={messages.isFetchingNextPage} onClick={() => void messages.fetchNextPage()}>{t('social.older')}</Button>}
-      {messages.isPending && <p>{t('social.loading')}</p>}
-      {!list.length && messages.isSuccess && <p className={s.empty}>{t('social.first_message')}</p>}
-      {list.map(m => <article key={m.id} className={`${s.bubble} ${m.sender_id === user.id ? s.mine : ''}`}>
-        <div>{m.text}</div>
-        {attachmentPath(m) && <Link className={s.music} to={m.attachment_kind === 'track' ? '/track/$id' : '/shared/playlist/$shareId'} params={{ id: m.attachment_id!, shareId: m.attachment_id! }}>{t(m.attachment_kind === 'track' ? 'social.listen_track' : 'social.listen_playlist')} ↗</Link>}
-        <small className={s.muted}>{new Date(m.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}{m.sender_id === user.id ? ` · ${t(m.read ? 'social.read' : 'social.sent')}` : ''}</small>
-      </article>)}<div ref={end} />
-    </div>
-    <form className={s.composer} onSubmit={e => { e.preventDefault(); if (text.trim() && !send.isPending) send.mutate(); }}>
-      <textarea aria-label={t('social.message')} placeholder={t('social.message')} maxLength={4000} rows={2} value={text} disabled={send.isPending} onChange={e => setText(e.target.value)} />
-      <Button type="submit" variant="primary" busy={send.isPending} disabled={!text.trim()}>{t('social.send')}</Button>
-    </form>
-  </section>;
+function Chat({ person, compact = false, active = true }: { person: SocialPerson; compact?: boolean; active?: boolean }) {
+ const { api,key,user }=useSocial();
+ return <ChatConversation person={person} api={api} queryKey={key} userId={user.id} compact={compact} active={active} />;
 }
@@ -4,6 +4,53 @@
 .tabs, .actions { display: flex; flex-wrap: wrap; gap: 8px; }
 .layout { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
 .stack { display: grid; gap: 12px; }
+.privacy { border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 0; min-width: 0; }
+.privacy legend { color: var(--text2); padding: 0 8px; font-size: 13px; }
+.privacy p { margin-bottom: 0; }
+.activity { display: grid; gap: 5px; border-left: 2px solid var(--ok); padding-left: 12px; overflow-wrap: anywhere; }
+.activity a { color: var(--accent2); text-decoration: none; }
+.activity a:hover { text-decoration: underline; }
+.listening { font-size: 12px; color: var(--ok); }
+.stream { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 16px; border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: 14px; background: var(--surface); margin-bottom: 20px; }
+.choice { display: flex; gap: 8px; padding: 10px 0; align-items: center; }
+.dock { position: fixed; right: 24px; bottom: 104px; z-index: 45; width: 220px; border-radius: 16px; border: 1px solid var(--line2); background: var(--elev); box-shadow: var(--shadow); overflow: hidden; }
+.dockOpen { width: min(390px, calc(100vw - 32px)); max-height: calc(100dvh - 124px); }
+.dockHeader { display: flex; align-items: center; min-height: 48px; padding: 0 8px; background: var(--surface2); gap: 4px; }
+.dockHeader button { border: 0; background: transparent; color: var(--text); font: inherit; padding: 12px; cursor: pointer; }
+.dockHeader button:first-child { flex: 1; text-align: left; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dock .chat { border: 0; border-radius: 0; display: flex; flex-direction: column; max-height: calc(100dvh - 174px); }
+.dock .messages { flex: 1; min-height: 60px; max-height: min(40vh, 360px); padding: 14px; }
+.dock .composer { padding: 12px; flex-wrap: wrap; }
+.dock .composer textarea { flex-basis: 100%; }
+.dockList { max-height: 50vh; overflow-y: auto; padding: 8px; }
+.dockList button { display: flex; gap: 12px; align-items: center; border: 0; background: transparent; color: var(--text); padding: 12px; width: 100%; cursor: pointer; border-radius: 10px; text-align: left; font: inherit; }
+.dockList button:hover { background: var(--hover); }
+.dockList small { margin-left: auto; color: var(--accent2); }
+.dockOpen { animation: chatReveal .22s cubic-bezier(.2,.8,.2,1); transform-origin: bottom right; }
+.bubble { animation: messageIn .18s ease-out; }
+.chatSearch { padding: 10px 14px; border-bottom: 1px solid var(--line); }
+.chatSearch label { font-size: 11px; }
+.date { align-self: center; color: var(--text3); font-size: 11px; margin: 6px 0; }
+.quote { margin: 0; padding-left: 10px; border-left: 2px solid var(--accent2); color: var(--text2); font-size: 12px; max-height: 60px; overflow: hidden; }
+.messageText { user-select: text; }
+.messageFoot { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
+.messageFoot button { font-size: 12px; min-width: 24px; }
+.deleted { font-style: italic; opacity: .7; }
+.sending { opacity: .6; }
+.reactions { display: flex; flex-wrap: wrap; gap: 5px; }
+.reactions button { border: 1px solid var(--line); border-radius: 14px; background: var(--surface2); color: var(--text); padding: 5px 9px; cursor: pointer; transition: transform .15s, background .15s; }
+.reactions button:hover { transform: translateY(-2px); }
+.reactions button[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent2); }
+.typing { min-height: 19px; padding: 0 14px; color: var(--text3); font-size: 11px; }
+.replyBar { display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: var(--accent-soft); }
+.replyBar > div { flex: 1; min-width: 0; }
+.replyBar small { color: var(--accent2); }
+.replyBar p { margin: 3px 0; font-size: 12px; max-height: 35px; overflow: hidden; }
+@keyframes chatReveal { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
+@keyframes messageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+@media(prefers-reduced-motion: reduce) { .dockOpen, .bubble { animation: none; } .reactions button { transition: none; } .reactions button:hover { transform: none; } }
+@media(max-width: 760px) { .dock { bottom: 162px; right: 12px; width: 160px; } .dockOpen { width: calc(100vw - 24px); } .dock .messages { max-height: 32vh; } }
+@media(max-width: 760px) { .dockOpen { max-height: calc(100dvh - 182px); } .dock .chat { max-height: calc(100dvh - 232px); } }
 .person { padding: 16px; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; display: grid; gap: 16px; overflow-wrap: anywhere; }
 .identity { display: flex; gap: 12px; align-items: center; }
 .avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: var(--accent2); background: var(--accent-soft); }
@@ -1,5 +1,5 @@
 import { unwrap } from '@pipu/core';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Link, useNavigate } from '@tanstack/react-router';
 import { useState, type MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -57,7 +57,20 @@ export function PlaylistPage({ id, shared = false }: { id: string; shared?: bool
  </div>;
 }

-function PlaylistDetail({ playlist, readOnly = false, shareId }: { playlist: Playlist; readOnly?: boolean; shareId?: string }) {
+export function ActivityPlaylistPage({ userId }: { userId: string }) {
+  const session = useSession();
+  const errorText = useErrorText();
+  const { t } = useTranslation();
+  const query = useQuery({ queryKey: ['activity-playlist', session.state.status === 'signed_in' ? session.state.user.id : '', userId], queryFn: async () => unwrap(await session.client.GET('/api/v1/social/activity/{userId}/playlist', { params: { path: { userId } } })), staleTime: 0, refetchInterval: 15_000 });
+  return <div className={s.page}>
+    <Link to="/friends">← {t('social.title')}</Link>
+    <FormError>{query.error ? errorText(query.error) : null}</FormError>
+    {query.isPending && <PageSkeleton />}
+    {query.data && !query.isError && <PlaylistDetail key={query.data.id} playlist={query.data} readOnly activity />}
+  </div>;
+}
+
+function PlaylistDetail({ playlist, readOnly = false, shareId, activity = false }: { playlist: Playlist; readOnly?: boolean; shareId?: string; activity?: boolean }) {
  const openShare = useMusicShare();
  const { t } = useTranslation();
  const session = useSession();
@@ -108,7 +121,7 @@ function PlaylistDetail({ playlist, readOnly = false, shareId }: { playlist: Pla
    <div className={s.toolbar}>
      <Button variant="primary" icon={playIcon} disabled={!playlist.tracks.some(x => x.available)} onClick={() => play(false)}>{t('collection.play_all')}</Button>
      <Button icon={shuffleIcon} disabled={!playlist.tracks.some(x => x.available)} onClick={() => play(true)}>{t('collection.shuffle')}</Button>
-      <Button icon={shareIcon} busy={sharing.isPending} disabled={revoke.isPending} onClick={() => sharing.mutate()}>{t('playlists.share')}</Button>
+      {!activity && <Button icon={shareIcon} busy={sharing.isPending} disabled={revoke.isPending} onClick={() => sharing.mutate()}>{t('playlists.share')}</Button>}
      {!readOnly && <>
      <Button disabled={save.isPending} onClick={() => setEdit(true)}>{t('playlists.edit')}</Button>
      <Button aria-pressed={manage} onClick={() => setManage(!manage)}>{t('playlists.manage')}</Button>
@@ -13,6 +13,7 @@ import { Button, Field, FormError, Segmented } from '../shared/ui/ui';
 import { LanguageSwitch } from '../widgets/LanguageSwitch';
 import s from './page.module.css';
 import { Onboarding } from './Onboarding';
+import { FriendRecommendations } from '../features/social/Social';
 import { DesktopOfflineSection, DesktopUpdateButton } from '../features/desktop/DesktopFeatures';

 type Theme = NonNullable<components['schemas']['UiPrefs']['theme']>;
@@ -371,6 +372,7 @@ function RecommendationSettings() {
  const errorText = useErrorText();
  const options = useQuery({ queryKey: ['onboarding'], queryFn: async () => unwrap(await session.client.GET('/api/v1/onboarding')), staleTime: 0 });
  return <section className={s.section}>
+    <FriendRecommendations />
    {editing && options.data ? <Onboarding key={JSON.stringify(options.data.choice)} options={options.data} editing onDone={() => { setEditing(false); void queryClient.invalidateQueries({ queryKey: ['onboarding'] }); }} />
      : <Button busy={options.isFetching} onClick={() => { void options.refetch().then((result) => { if (result.data && !result.error) setEditing(true); }); }}>{t('onboarding.edit')}</Button>}
    <FormError>{options.error ? errorText(options.error) : null}</FormError>
@@ -1,5 +1,9 @@
 import {
  EventBuffer,
+  createActivityPublisher,
+  type ActivityPublisher,
+  ListeningCoordinator,
+  type ListeningRoom,
  WaveCoordinator,
  EARLY_SKIP_MS,
  type WaveOutcome,
@@ -35,6 +39,10 @@ const PRELOAD_BEFORE_MS = 20_000;
 * Media Session и сохранение «трек и момент» (локально и на сервере).
 */
 export class Player {
+  private activity: ActivityPublisher | null = null;
+  private listening: ListeningCoordinator | null = null;
+  private applyingSync = false;
+  private remoteRoom: string | null = null;
  readonly offline: DesktopOffline | null;
  private retryEvents: (() => Promise<void>) | null = null;
  private readonly engine: AudioEngine;
@@ -93,6 +101,17 @@ export class Player {

  /** Запуск фоновой отправки событий (парный вызов — dispose). */
  start() {
+    this.activity ??= createActivityPublisher(this.session);
+    this.activity.update(this.state);
+    if (!this.listening) {
+      this.listening = new ListeningCoordinator(this.session, this.activity.deviceId, {
+        read: this.getState,
+        pause: () => { this.restoreVersion++; this.leaveWave(); this.audio.pause(); },
+        apply: (room, position, current) => this.syncListening(room, position, current),
+        changed: listening => this.update({ listening }),
+      });
+      this.listening.start();
+    }
    this.offline?.activate();
    this.timers.push(setInterval(() => void this.events.flush(), FLUSH_EVERY_MS));
    if (this.retryEvents) {
@@ -116,6 +135,8 @@ export class Player {

  private update(patch: Partial<PlayerState>) {
    this.state = { ...this.state, ...patch };
+    this.activity?.update(this.state);
+    this.listening?.update();
    for (const fn of this.listeners) fn();
    this.media.syncDesktopMedia();
  }
@@ -135,6 +156,7 @@ export class Player {

  /** Запустить список с позиции index в контексте (альбом, поиск, коллекция...). */
  playList(tracks: Track[], index: number, context: PlayContext) {
+    if (this.listening?.locked && !this.applyingSync) return;
    const playable = tracks.filter((t) => t.available && t.stream_url);
    const target = tracks[index];
    if (!target || !playable.length) return;
@@ -151,6 +173,7 @@ export class Player {

  /** Запустить волну (или перезапустить с новым контекстом). */
  async startWave(activity: string | null, mood: string | null, seed?: { type: 'artist' | 'album' | 'track'; id: string; label: string }) {
+    if (this.listening?.locked) return;
    this.restoreVersion++;
    this.finishAttempt('skip');
    this.leaveWave();
@@ -190,6 +213,7 @@ export class Player {
   * Прерванный трек — не скип: волне сигнал не уходит, в историю он попадает, только если играл ≥ 30 с.
   */
  async setWaveContext(activity: string | null, mood: string | null) {
+    if (this.listening?.locked) return;
    const wave = this.state.wave;
    if (!wave) return this.startWave(activity, mood);
    this.update({ wave: { ...wave, activity, mood } });
@@ -215,6 +239,7 @@ export class Player {
  }

  stopWave() {
+    if (this.listening?.locked) return;
    this.leaveWave();
    this.pause();
  }
@@ -247,11 +272,13 @@ export class Player {
  }

  toggle() {
+    if (this.listening?.locked && !this.applyingSync) return;
    if (this.state.playing) this.pause();
    else this.play();
  }

  play() {
+    if (this.listening?.locked && !this.applyingSync) return;
    if (!this.queue.current) return;
    if (!this.audio.src || !this.attempt) {
      void this.load(true, this.state.positionMs);
@@ -263,10 +290,12 @@ export class Player {
  }

  pause() {
+    if (this.listening?.locked && !this.applyingSync) return;
    this.audio.pause();
  }

  next() {
+    if (this.listening?.locked) return;
    this.finishAttempt('skip');
    if (this.queue.next()) {
      this.syncQueue();
@@ -278,6 +307,7 @@ export class Player {

  /** «Назад»: первые 3 с — к предыдущему треку, дальше — в начало текущего. */
  prev() {
+    if (this.listening?.locked) return;
    if (this.audio.currentTime > 3) {
      this.seek(0);
      return;
@@ -290,6 +320,7 @@ export class Player {
  }

  jump(index: number) {
+    if (this.listening?.locked) return;
    this.finishAttempt('skip');
    this.queue.jump(index);
    this.syncQueue();
@@ -297,6 +328,7 @@ export class Player {
  }

  seek(ms: number) {
+    if (this.listening?.locked && !this.applyingSync) return;
    const track = this.queue.current;
    if (!track) return;
    const to = Math.min(Math.max(ms, 0), track.duration_ms);
@@ -323,12 +355,14 @@ export class Player {
  }

  toggleShuffle() {
+    if (this.listening?.locked) return;
    this.queue.setShuffle(!this.queue.shuffle);
    this.syncQueue();
    this.saveLocal();
  }

  cycleRepeat() {
+    if (this.listening?.locked) return;
    const order: RepeatMode[] = ['off', 'all', 'one'];
    this.queue.repeat = order[(order.indexOf(this.queue.repeat) + 1) % order.length]!;
    this.syncQueue();
@@ -363,13 +397,13 @@ export class Player {

  // --- загрузка трека ---

-  private async load(autoplay: boolean, startMs = 0) {
+  private async load(autoplay: boolean, startMs = 0, current = () => true) {
    const track = this.queue.current;
    if (!track?.stream_url) return;
    const version = this.restoreVersion;
    if (this.offline) {
      await this.offline.ready.catch(() => undefined);
-      if (this.queue.current !== track || version !== this.restoreVersion) return;
+      if (!current() || this.queue.current !== track || version !== this.restoreVersion) return;
    }
    this.offline?.keep([track.id]);
    const source = this.offline?.local(track).stream_url ?? track.stream_url;
@@ -396,6 +430,7 @@ export class Player {
      try {
        const resumed = this.engine.resume();
        if (resumed) await resumed;
+        if (!current() || version !== this.restoreVersion) return;
        await this.audio.play();
      } catch {
        // Автозапуск заблокирован браузером — ждём нажатия «Слушать».
@@ -649,6 +684,10 @@ export class Player {
  }

  dispose() {
+    this.listening?.dispose();
+    this.listening = null;
+    this.activity?.dispose();
+    this.activity = null;
    this.restoreVersion++;
    this.wavePolicy.activate(null);
    this.fading = false;
@@ -661,4 +700,30 @@ export class Player {
    this.media.dispose();
    void this.events.flush();
  }
+
+  beginListeningAudio() {
+    if (this.state.listening?.room?.playing) {
+      this.applyingSync = true; try { this.play(); } finally { this.applyingSync = false; }
+    }
+    this.listening?.beginAudio();
+  }
+  private async syncListening(room: ListeningRoom, position: number, current: () => boolean) {
+    if (!room.track_id) { this.audio.pause(); return; }
+    if (this.remoteRoom !== room.id || this.state.track?.id !== room.track_id || this.state.queue.length !== 1 || this.state.wave) {
+      const track = unwrap(await this.session.client.GET('/api/v1/tracks/{id}', { params: { path: { id: room.track_id } } }));
+      if (!current()) return;
+      this.remoteRoom = room.id;
+      this.restoreVersion++; this.finishAttempt('skip'); this.leaveWave(); this.context = { type: 'queue' };
+      this.queue.set([track], 0); this.queue.repeat = 'off'; this.queue.shuffle = false; this.syncQueue();
+      await this.load(room.playing, Math.min(position, Math.max(0, track.duration_ms - 100)), current);
+      return;
+    }
+    if (!current()) return;
+    this.applyingSync = true;
+    try {
+      if (Math.abs(this.state.positionMs - position) > 1500) this.seek(Math.min(position, Math.max(0, this.state.durationMs - 100)));
+      if (room.playing && !this.state.playing) this.play();
+      if (!room.playing && this.state.playing) this.pause();
+    } finally { this.applyingSync = false; }
+  }
 }
@@ -1,6 +1,7 @@
 import type { WaveInfo, Track, PlayContext, RepeatMode } from '@pipu/core';

 export interface PlayerState {
+  listening?: import('@pipu/core').ListeningClientState;
  wave: WaveInfo | null;
  track: Track | null;
  queue: Track[];
@@ -210,6 +210,7 @@ export function Menu({
  header,
  align = 'end',
  triggerClassName,
+  portal = false,
 }: {
  label: string;
  trigger: ReactNode;
@@ -217,8 +218,10 @@ export function Menu({
  header?: ReactNode;
  align?: 'start' | 'end';
  triggerClassName?: string;
+  portal?: boolean;
 }) {
  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState<CSSProperties>();
  const ref = useRef<HTMLDivElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
@@ -246,7 +249,7 @@ export function Menu({
    els[next]?.focus();
  };
  const menu = (
-    <div ref={menuRef} className={cx(s.menu, align === 'start' && s.menuStart)} role="menu" aria-label={label} onKeyDown={onMenuKey}>
+      <div ref={menuRef} style={portal && !window.matchMedia?.('(max-width: 767px)').matches ? position : undefined} className={cx(s.menu, align === 'start' && s.menuStart)} role="menu" aria-label={label} onKeyDown={onMenuKey}>
      {header}
      {items.map((it) => (
        <button
@@ -273,11 +276,18 @@ export function Menu({
        aria-label={label}
        aria-haspopup="menu"
        aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
+          onClick={e => {
+            if (portal) {
+              const rect = e.currentTarget.getBoundingClientRect();
+              const bottom = Math.max(12, window.innerHeight - rect.top + 6);
+              setPosition({ position: 'fixed', zIndex: 60, top: 'auto', bottom, right: Math.max(12, window.innerWidth - rect.right), maxHeight: Math.max(120, window.innerHeight - bottom - 12), overflowY: 'auto' });
+            }
+            setOpen(v => !v);
+          }}
      >
        {trigger}
      </button>
-      {open && (window.matchMedia?.('(max-width: 767px)').matches
+        {open && (portal || window.matchMedia?.('(max-width: 767px)').matches
        ? createPortal(menu, document.body)
        : menu)}
    </div>
@@ -82,11 +82,21 @@ export function fakeApi(initial: FakeUser[]) {
  const blocks = new Set<string>();
  const messages: (components['schemas']['DirectMessage'] & { recipient: string })[] = [];
  const notifications: (components['schemas']['SocialNotification'] & { recipient: string })[] = [];
+  const activityVisibility = new Map<string, components['schemas']['ActivityVisibility']>();
+  const friendRecommendations = new Map<string, boolean>();
+  const activity = new Map<string, components['schemas']['ListeningActivity'] & { device_id: string; position_ms: number }>();
+  const listeningPreferences = new Map<string, components['schemas']['ListeningPreferences']>();
+  const listeningRooms = new Map<string, components['schemas']['ListeningRoom']>();
+  const listeningMembers = new Map<string, string>();
+  const listeningRequests = new Map<string, components['schemas']['ListeningRequest'] & { guest_id: string }>();
+  const typing = new Map<string, number>();
+  const defaultListening = { requests: 'nobody', auto_accept: 'nobody', autoplay: true } as const;
  const pair = (a: string, b: string) => [a, b].sort().join(':');
  const isBlocked = (a: string, b: string) => blocks.has(`${a}:${b}`) || blocks.has(`${b}:${a}`);
  const socialPerson = (me: string, p: FakeUser): components['schemas']['SocialPerson'] => {
    const f = friendships.get(pair(me, p.id));
-    return { id: p.id, username: p.username, display_name: p.display_name ?? p.username,
+    const visible = activityVisibility.get(p.id) === 'everyone' || activityVisibility.get(p.id) === 'friends' && f?.accepted;
+    return { id: p.id, username: p.username, display_name: p.display_name ?? p.username, ...(visible && activity.has(p.id) && !isBlocked(me,p.id) ? { activity: activity.get(p.id) } : {}),
      relationship: blocks.has(`${me}:${p.id}`) ? 'blocked' : f?.accepted ? 'friend' : f ? f.sender === me ? 'outgoing' : 'incoming' : 'none',
      unread: messages.filter(m => m.recipient === me && m.sender_id === p.id && !m.read).length };
  };
@@ -216,7 +226,63 @@ export function fakeApi(initial: FakeUser[]) {

    if (!user || !req.headers.get('Authorization')) return problem(401, 'auth.unauthorized');

+    if (path === '/api/v1/me/social/activity/visibility' && body) { activityVisibility.set(user.id, body.visibility as components['schemas']['ActivityVisibility']); if (body.visibility === 'nobody') activity.delete(user.id); return new Response(null,{status:204}); }
+    if (path === '/api/v1/me/social/recommendations' && body) { friendRecommendations.set(user.id,!!body.enabled);return new Response(null,{status:204}); }
+    if (path === '/api/v1/me/social/activity' && body) {
+      if (activityVisibility.get(user.id) !== undefined && activityVisibility.get(user.id) !== 'nobody' && body.playing) {
+        const track = albumTracks.find(t => t.id === body.track_id); const playlist = playlists.get(String(body.playlist_id));
+        if (track) activity.set(user.id,{track_id:track.id,track_title:track.title,artist:'Кино',context: body.context as 'wave'|'playlist'|'other',device_id:String(body.device_id),position_ms:Number(body.position_ms??0),...(playlist ? {playlist_id:playlist.id,playlist_name:playlist.name} : {})});
+      } else activity.delete(user.id);
+      return new Response(null,{status:204});
+    }
+    const activityPlaylistPath=/^\/api\/v1\/social\/activity\/([^/]+)\/playlist$/.exec(path);
+    if (activityPlaylistPath) {
+      const owner=users.get(activityPlaylistPath[1]!); const a=owner ? socialPerson(user.id,owner).activity : undefined; const p=a?.playlist_id ? playlists.get(a.playlist_id) : undefined;
+      return p ? json({...p,share_id:null}) : problem(404,'social.activity_unavailable');
+    }
+    if (path === '/api/v1/me/social/listening/preferences' && body) { listeningPreferences.set(user.id,body as components['schemas']['ListeningPreferences']);return new Response(null,{status:204}); }
+    if (path === '/api/v1/me/social/listening') {
+      const room=listeningRooms.get(listeningMembers.get(user.id) ?? '');
+      if(room)room.participants=[...listeningMembers].filter(([,id])=>id===room.id).map(([id])=>({id,name:users.get(id)?.display_name??users.get(id)?.username??id}));
+      return json({preferences:listeningPreferences.get(user.id)??defaultListening,room:room??null,requests:[...listeningRequests.values()].filter(r=>r.recipient_id===user.id||r.sender_id===user.id),server_time:new Date().toISOString()});
+    }
+    if (path === '/api/v1/me/social/listening/state' && body) {
+      const room=listeningRooms.get(String(body.room_id));if(!room||room.owner_id!==user.id||room.device_id!==body.device_id)return problem(403,'social.unavailable');
+      Object.assign(room,{track_id:body.track_id??null,position_ms:body.position_ms,playing:body.playing,updated_at:new Date().toISOString()});return new Response(null,{status:204});
+    }
+    if (path === '/api/v1/me/social/listening/actions' && body) {
+      const target=String(body.target_id);const op=String(body.action);
+      if(op==='join'||op==='invite'){
+        const host=op==='join'?target:user.id; const guest=op==='join'?user.id:target; const prefs=listeningPreferences.get(target)??defaultListening;
+        const friend=!!friendships.get(pair(user.id,target))?.accepted;
+        if(isBlocked(user.id,target)||!(prefs.requests==='everyone'||prefs.requests==='friends'&&friend))return problem(403,'social.unavailable');
+        let room=[...listeningRooms.values()].find(r=>r.owner_id===host);
+        const source=activity.get(host);if(!room){room={id:crypto.randomUUID(),owner_id:host,owner_name:users.get(host)?.username??host,device_id:String(op==='join'?source?.device_id:body.device_id),track_id:String(op==='join'?source?.track_id:body.track_id),position_ms:Number(op==='join'?source?.position_ms:body.position_ms??0),playing:true,updated_at:new Date().toISOString(),participants:[]};listeningRooms.set(room.id,room);listeningMembers.set(host,room.id);}
+        if(prefs.auto_accept==='everyone'||prefs.auto_accept==='friends'&&friend)listeningMembers.set(guest,room.id);
+        else listeningRequests.set(String(body.id),{id:String(body.id),owner_id:host,guest_id:guest,sender_id:user.id,sender_name:user.username,recipient_id:target,kind:op,expires_at:new Date(Date.now()+120000).toISOString()});
+      }else if(op==='accept'||op==='decline'||op==='cancel'){
+        const r=listeningRequests.get(target);if(r){if(op==='accept'&&r.recipient_id===user.id){const room=[...listeningRooms.values()].find(room=>room.owner_id===r.owner_id);if(room)listeningMembers.set(r.guest_id,room.id);}listeningRequests.delete(target);}
+      }else if(op==='leave'||op==='end'){
+        const room=listeningRooms.get(target);if(room?.owner_id===user.id){listeningRooms.delete(target);for(const [u,r]of listeningMembers)if(r===target)listeningMembers.delete(u);}else listeningMembers.delete(user.id);
+      }
+      return new Response(null,{status:204});
+    }
+    const chatMeta=/^\/api\/v1\/me\/social\/chats\/([^/]+)\/meta$/.exec(path);
+    if(chatMeta){const peer=chatMeta[1]!;if(!friendships.get(pair(user.id,peer))?.accepted||isBlocked(user.id,peer))return problem(403,'social.unavailable');if(req.method==='PUT'){typing.set(`${user.id}:${peer}`,body?.typing?Date.now()+6000:0);return new Response(null,{status:204});}return json({typing:(typing.get(`${peer}:${user.id}`)??0)>Date.now()});}
+    const updateMessage=/^\/api\/v1\/me\/social\/chats\/([^/]+)\/messages\/([^/]+)$/.exec(path);
+    if(updateMessage&&body){
+      const peer=updateMessage[1]!;const m=messages.find(m=>m.id===updateMessage[2]&&pair(m.sender_id,m.recipient)===pair(user.id,peer));
+      if(!m||!friendships.get(pair(user.id,peer))?.accepted||isBlocked(user.id,peer))return problem(403,'social.unavailable');
+      if(body.action!=='react'&&m.sender_id!==user.id)return problem(403,'social.unavailable');
+      if(body.action==='edit'){m.text=String(body.text);m.edited_at=new Date().toISOString();}
+      if(body.action==='delete'){m.deleted=true;m.text='';m.attachment_id=undefined;m.attachment_kind='none';m.reactions=[];}
+      if(body.action==='react'){const reactions=m.reactions??[];const old=reactions.find(r=>r.emoji===body.emoji);m.reactions=old?reactions.filter(r=>r!==old):[...reactions,{emoji:String(body.emoji),count:1,mine:true}];}
+      return new Response(null,{status:204});
+    }
+
    if (path === '/api/v1/me/social') return json({
+      activity_visibility: activityVisibility.get(user.id) ?? 'nobody',
+      friends_recommendations: friendRecommendations.get(user.id) ?? true,
      people: [...users.values()].filter(p => p.id !== user.id && !p.is_blocked && !blocks.has(`${p.id}:${user.id}`)).map(p => socialPerson(user.id, p)).filter(p => p.relationship !== 'none'),
      notifications: notifications.filter(n => n.recipient === user.id && !isBlocked(user.id, n.actor_id)),
      unread: notifications.filter(n => n.recipient === user.id && !n.read && !isBlocked(user.id, n.actor_id)).length,
@@ -239,7 +305,7 @@ export function fakeApi(initial: FakeUser[]) {
    const chatPath = /^\/api\/v1\/me\/social\/chats\/([^/]+)$/.exec(path);
    if (chatPath) {
      const peer=chatPath[1]!;if (!friendships.get(pair(user.id,peer))?.accepted || isBlocked(user.id,peer)) return problem(403,'social.unavailable');
-      if (req.method === 'GET') return json(messages.filter(m => pair(m.sender_id,m.recipient)===pair(user.id,peer) && (!url.searchParams.has('before') || m.seq<Number(url.searchParams.get('before')))).slice(-50));
+      if (req.method === 'GET') {const q=url.searchParams.get('q')?.toLowerCase()??'';return json(messages.filter(m => pair(m.sender_id,m.recipient)===pair(user.id,peer) && (!url.searchParams.has('before') || m.seq<Number(url.searchParams.get('before'))) && (!q||!m.deleted&&m.text.toLowerCase().includes(q))).slice(-50).map(m=>({...m,reply_preview:m.reply_to?messages.find(r=>r.id===m.reply_to)?.text:undefined})));}
      if (req.method === 'POST' && body) {
        const old=messages.find(m => m.id===body.id);if(old)return json(old);
        const message={...body,recipient:peer,sender_id:user.id,seq:messages.length+1,created_at:new Date().toISOString(),read:false} as typeof messages[number];
@@ -442,5 +508,5 @@ export function fakeApi(initial: FakeUser[]) {
    return problem(404, 'common.not_found');
  };

-  return { fetch: fetchImpl as typeof fetch, calls, users, playlists, friendships, notifications, messages, signOut: () => (current = null) };
+  return { fetch: fetchImpl as typeof fetch, calls, users, playlists, friendships, notifications, messages, activityVisibility, activity, friendRecommendations, listeningPreferences, listeningRooms, listeningMembers, listeningRequests, signOut: () => (current = null) };
 }
@@ -39,6 +39,7 @@ import { SearchBox } from './SearchBox';
 import s from './AppShell.module.css';
 import { DesktopUpdateDialog, DesktopOfflineBanner } from '../features/desktop/DesktopFeatures';
 import { useSocialUnread, SocialProvider } from '../features/social/Social';
+import { ListeningBanner } from '../features/social/Listening';

 type NavPath =
  | '/friends'
@@ -312,6 +313,7 @@ function ShellMain() {
  return (
    <main id="content" className={s.content} tabIndex={-1}>
      <DesktopOfflineBanner />
+      <ListeningBanner />
      <div key={key} className={s.routeIn}>
        <Suspense fallback={<PageSkeleton />}>
          <Outlet />
@@ -40,6 +40,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
  const player = usePlayer();
  const openShare = useMusicShare();
  const st = usePlayerState();
+  const locked = st.listening?.locked === true;
  const narrow = useNarrow();
  const [sheetOpen, setSheetOpen] = useState(false);
  const [queueOpen, setQueueOpen] = useState(false);
@@ -132,7 +133,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
          >
            <Icon src={track.reaction === 'dislike' ? dislikeFillIcon : dislikeIcon} />
          </button>
-          <button type="button" className={s.icon} aria-label={t('player.prev')} onClick={() => player.prev()}>
+          <button type="button" className={s.icon} aria-label={t('player.prev')} disabled={locked} onClick={() => player.prev()}>
            <Icon src={prevIcon} size={26} />
          </button>
          <button
@@ -140,11 +141,11 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
            className={s.play}
            aria-label={t(st.playing ? 'player.pause' : 'player.play')}
            aria-busy={st.loading || undefined}
-            onClick={() => player.toggle()}
+            disabled={locked} onClick={() => player.toggle()}
          >
            <Icon src={st.playing ? pauseIcon : playIcon} size={28} />
          </button>
-          <button type="button" className={s.icon} aria-label={t('player.next')} onClick={() => player.next()}>
+          <button type="button" className={s.icon} aria-label={t('player.next')} disabled={locked} onClick={() => player.next()}>
            <Icon src={nextIcon} size={26} />
          </button>
          <button
@@ -168,7 +169,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
            value={Math.min(st.positionMs, st.durationMs || track.duration_ms)}
            aria-label={t('player.progress')}
            aria-valuetext={formatDuration(st.positionMs)}
-            onChange={(e) => player.seek(Number(e.target.value))}
+            disabled={locked} onChange={(e) => player.seek(Number(e.target.value))}
            style={{ '--pct': `${(st.positionMs / (st.durationMs || track.duration_ms)) * 100}%` } as CSSProperties}
          />
          <span className={s.time}>{formatDuration(st.durationMs || track.duration_ms)}</span>
@@ -190,7 +191,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
          className={cx(s.icon, st.shuffle && s.accent)}
          aria-label={t('player.shuffle')}
          aria-pressed={st.shuffle}
-          onClick={() => player.toggleShuffle()}
+          disabled={locked} onClick={() => player.toggleShuffle()}
        >
          <Icon src={shuffleIcon} size={20} />
        </button>
@@ -199,7 +200,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
          className={cx(s.icon, st.repeat !== 'off' && s.accent)}
          aria-label={repeatLabel}
          title={repeatLabel}
-          onClick={() => player.cycleRepeat()}
+          disabled={locked} onClick={() => player.cycleRepeat()}
        >
          <Icon src={st.repeat === 'one' ? repeatOneIcon : repeatIcon} size={20} />
        </button>
@@ -271,6 +272,7 @@ function NowPlayingSheet({
  const { t } = useTranslation();
  const player = usePlayer();
  const st = usePlayerState();
+  const locked = st.listening?.locked === true;
  const track = st.track;
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
@@ -321,7 +323,7 @@ function NowPlayingSheet({
            step={1000}
            value={Math.min(st.positionMs, st.durationMs || track.duration_ms)}
            aria-label={t('player.progress')}
-            onChange={(e) => player.seek(Number(e.target.value))}
+            disabled={locked} onChange={(e) => player.seek(Number(e.target.value))}
            style={{ '--pct': `${(st.positionMs / (st.durationMs || track.duration_ms)) * 100}%` } as CSSProperties}
          />
          <span className={s.time}>{formatDuration(st.durationMs || track.duration_ms)}</span>
@@ -330,13 +332,13 @@ function NowPlayingSheet({
          <button type="button" className={cx(s.icon, track.reaction === 'dislike' && s.danger)} aria-label={t(track.reaction === 'dislike' ? 'player.undislike' : 'player.dislike')} aria-pressed={track.reaction === 'dislike'} onClick={() => react('dislike')}>
            <Icon src={track.reaction === 'dislike' ? dislikeFillIcon : dislikeIcon} />
          </button>
-          <button type="button" className={s.icon} aria-label={t('player.prev')} onClick={() => player.prev()}>
+          <button type="button" className={s.icon} aria-label={t('player.prev')} disabled={locked} onClick={() => player.prev()}>
            <Icon src={prevIcon} size={28} />
          </button>
-          <button type="button" className={s.play} aria-label={t(st.playing ? 'player.pause' : 'player.play')} onClick={() => player.toggle()}>
+          <button type="button" className={s.play} aria-label={t(st.playing ? 'player.pause' : 'player.play')} disabled={locked} onClick={() => player.toggle()}>
            <Icon src={st.playing ? pauseIcon : playIcon} size={32} />
          </button>
-          <button type="button" className={s.icon} aria-label={t('player.next')} onClick={() => player.next()}>
+          <button type="button" className={s.icon} aria-label={t('player.next')} disabled={locked} onClick={() => player.next()}>
            <Icon src={nextIcon} size={28} />
          </button>
          <button type="button" className={cx(s.icon, track.reaction === 'like' && s.accent)} aria-label={t(track.reaction === 'like' ? 'player.unlike' : 'player.like')} aria-pressed={track.reaction === 'like'} onClick={() => react('like')}>
@@ -344,10 +346,10 @@ function NowPlayingSheet({
          </button>
        </div>
        <div className={s.sheetExtra}>
-          <button type="button" className={cx(s.icon, st.shuffle && s.accent)} aria-label={t('player.shuffle')} aria-pressed={st.shuffle} onClick={() => player.toggleShuffle()}>
+          <button type="button" className={cx(s.icon, st.shuffle && s.accent)} aria-label={t('player.shuffle')} aria-pressed={st.shuffle} disabled={locked} onClick={() => player.toggleShuffle()}>
            <Icon src={shuffleIcon} size={22} />
          </button>
-          <button type="button" className={cx(s.icon, st.repeat !== 'off' && s.accent)} aria-label={repeatLabel} onClick={() => player.cycleRepeat()}>
+          <button type="button" className={cx(s.icon, st.repeat !== 'off' && s.accent)} aria-label={repeatLabel} disabled={locked} onClick={() => player.cycleRepeat()}>
            <Icon src={st.repeat === 'one' ? repeatOneIcon : repeatIcon} size={22} />
          </button>
          <button type="button" className={s.icon} aria-label={t('player.share')} onClick={() => void share()}>
@@ -379,6 +381,7 @@ function QueueDrawer({ id, variant, onClose }: { id: string; variant: 'bar' | 'i
  const { t } = useTranslation();
  const player = usePlayer();
  const st = usePlayerState();
+  const locked = st.listening?.locked === true;
  const upcoming = st.queue.slice(st.index, st.index + 40);
  const close = useRef<HTMLButtonElement>(null);
  // Клавиатура: при открытии фокус в панель, Escape закрывает.
@@ -408,7 +411,7 @@ function QueueDrawer({ id, variant, onClose }: { id: string; variant: 'bar' | 'i
            type="button"
            className={cx(s.queueRow, k === 0 && s.queueCurrent)}
            aria-current={k === 0 || undefined}
-            onClick={() => player.jump(st.index + k)}
+            disabled={st.listening?.locked} onClick={() => player.jump(st.index + k)}
          >
            <Cover album={tr.album} size={40} />
            <span className={s.meta}>