feat: add personal playlists and shareable track links

EOF

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/widgets/PlayerBar.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { ArtistLinks, Cover } from '../entities/catalog';
 import { usePlayer, usePlayerState } from '../player/context';
 import { formatDuration } from '../shared/lib/format';
+import { shareTrack } from '../shared/lib/share';
 import {
   albumIcon,
   closeIcon,
@@ -22,6 +23,7 @@ import {
   repeatIcon,
   repeatOneIcon,
   shuffleIcon,
+  shareIcon,
   volumeIcon,
   volumeOffIcon,
   waveIcon,
@@ -35,6 +37,16 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
   const player = usePlayer();
   const st = usePlayerState();
   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(() => {
@@ -57,6 +69,18 @@ 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 repeatLabel = t(`player.repeat_${st.repeat}`);
   const ctx = st.context;
   const tr = t as unknown as (k: string, o?: Record<string, unknown>) => string;
@@ -67,7 +91,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
         ? t('player.source_wave_seed', { label: ctx.label })
         : t('player.source_wave')
       : ctx.type === 'collection'
-        ? tr(`player.source_${ctx.id === 'dislikes' ? 'dislikes' : 'likes'}`)
+        ? ctx.label ?? tr(`player.source_${ctx.id === 'dislikes' ? 'dislikes' : 'likes'}`)
         : tr(`player.source_${ctx.type}`, { label: ctx.label ?? '' });
 
   return (
@@ -154,6 +178,9 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
       </div>
 
       <div className={s.right}>
+        <button type="button" className={cx(s.icon, s.shareButton)} aria-label={t('player.share')} title={t('player.share')} disabled={sharing} onClick={() => void share()}>
+          <Icon src={shareIcon} size={20} />
+        </button>
         <button
           type="button"
           className={cx(s.icon, st.shuffle && s.accent)}
@@ -204,6 +231,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
         />
       </div>
       {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>
   );
 }