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

apps/web/src/widgets/PlayerBar.tsx

@@ -7,7 +7,9 @@ import { ArtistLinks, Cover, Equalizer } from '../entities/catalog';
 import { AddToPlaylist } from '../entities/playlists';
 import { usePlayer, usePlayerState } from '../player/context';
 import { formatDuration } from '../shared/lib/format';
-import { shareTrack } from '../shared/lib/share';
+import { trackShareUrl } from '@pipu/core';
+import { desktopHandle } from '../desktop';
+import { useMusicShare } from '../features/social/Social';
 import {
   albumIcon,
   closeIcon,
@@ -36,20 +38,11 @@ import s from './PlayerBar.module.css';
 export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
   const { t } = useTranslation();
   const player = usePlayer();
+  const openShare = useMusicShare();
   const st = usePlayerState();
   const narrow = useNarrow();
   const [sheetOpen, setSheetOpen] = useState(false);
   const [queueOpen, setQueueOpen] = useState(false);
-  const [shareStatus, setShareStatus] = useState<'copied' | 'error' | null>(null);
-  const [sharing, setSharing] = useState(false);
-  useEffect(() => {
-    setShareStatus(null);
-  }, [st.track?.id]);
-  useEffect(() => {
-    if (!shareStatus) return;
-    const timer = setTimeout(() => setShareStatus(null), 4000);
-    return () => clearTimeout(timer);
-  }, [shareStatus]);
   const queueButton = useRef<HTMLButtonElement>(null);
   const queueId = useId();
   const closeQueue = useCallback(() => {
@@ -72,17 +65,8 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
   }
 
   const react = (r: 'like' | 'dislike') => void player.react(track, track.reaction === r ? null : r).catch(() => undefined);
-  const share = async () => {
-    setSharing(true);
-    setShareStatus(null);
-    try {
-      const result = await shareTrack(track.id, track.title);
-      if (result === 'copied') setShareStatus('copied');
-    } catch {
-      setShareStatus('error');
-    } finally {
-      setSharing(false);
-    }
+  const share = () => {
+    openShare({ attachment: { kind: 'track', id: track.id, title: track.title }, url: trackShareUrl(desktopHandle()?.server ?? window.location.origin, track.id) });
   };
   const repeatLabel = t(`player.repeat_${st.repeat}`);
   const ctx = st.context;
@@ -198,7 +182,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
 
       <div className={s.right}>
         <AddToPlaylist trackIds={[track.id]} compact className={cx(s.icon, s.playlistButton)} />
-        <button type="button" className={cx(s.icon, s.shareButton)} aria-label={t('player.share')} title={t('player.share')} disabled={sharing} onClick={() => void share()}>
+        <button type="button" className={cx(s.icon, s.shareButton)} aria-label={t('player.share')} title={t('player.share')} onClick={() => void share()}>
           <Icon src={shareIcon} size={20} />
         </button>
         <button
@@ -255,11 +239,9 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
           variant={variant}
           onClose={() => setSheetOpen(false)}
           share={share}
-          sharing={sharing}
         />
       )}
       {queueOpen && <QueueDrawer id={queueId} variant={variant} onClose={closeQueue} />}
-      {shareStatus && <span className={s.shareStatus} role="status">{t(shareStatus === 'copied' ? 'player.link_copied' : 'player.share_error')}</span>}
     </footer>
   );
 }
@@ -281,12 +263,10 @@ function NowPlayingSheet({
   variant,
   onClose,
   share,
-  sharing,
 }: {
   variant: 'bar' | 'island';
   onClose: () => void;
-  share: () => Promise<void>;
-  sharing: boolean;
+  share: () => void;
 }) {
   const { t } = useTranslation();
   const player = usePlayer();
@@ -370,7 +350,7 @@ function NowPlayingSheet({
           <button type="button" className={cx(s.icon, st.repeat !== 'off' && s.accent)} aria-label={repeatLabel} onClick={() => player.cycleRepeat()}>
             <Icon src={st.repeat === 'one' ? repeatOneIcon : repeatIcon} size={22} />
           </button>
-          <button type="button" className={s.icon} aria-label={t('player.share')} disabled={sharing} onClick={() => void share()}>
+          <button type="button" className={s.icon} aria-label={t('player.share')} onClick={() => void share()}>
             <Icon src={shareIcon} size={20} />
           </button>
           <button type="button" className={s.icon} aria-label={t(st.muted ? 'player.unmute' : 'player.mute')} onClick={() => player.toggleMute()}>