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

apps/web/src/pages/PlaylistsPage.tsx

@@ -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>