feat(web): player bar, playable track lists and Collection (M3)

- player bar with cover, like and dislike, previous / play / next,
  shuffle, repeat, seek bar and volume; PlayerProvider lives with the
  signed-in shell and restores the last track and position paused
- clicking a row (or Enter) plays the list from that track with its
  context (album, search, history, collection); the current track is
  highlighted and rows have a like button; a reaction refreshes lists
- Collection: history grouped by day with clearing, likes with "play
  all" and dislikes, all with paging; sidebar section
- events and playback state are flushed when the page is hidden;
  player timers survive StrictMode remounts

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/widgets/PlayerBar.tsx

@@ -0,0 +1,162 @@
+import type { CSSProperties } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ArtistLinks, Cover } from '../entities/catalog';
+import { usePlayer, usePlayerState } from '../player/context';
+import { formatDuration } from '../shared/lib/format';
+import {
+  dislikeFillIcon,
+  dislikeIcon,
+  likeFillIcon,
+  likeIcon,
+  musicIcon,
+  nextIcon,
+  pauseIcon,
+  playIcon,
+  prevIcon,
+  repeatIcon,
+  repeatOneIcon,
+  shuffleIcon,
+  volumeIcon,
+  volumeOffIcon,
+} from '../shared/ui/icons';
+import { cx, Icon } from '../shared/ui/ui';
+import s from './PlayerBar.module.css';
+
+/** Плеер внизу экрана (вид `bar`, docs/design.md). */
+export function PlayerBar() {
+  const { t } = useTranslation();
+  const player = usePlayer();
+  const st = usePlayerState();
+  const track = st.track;
+
+  if (!track) {
+    return (
+      <footer className={s.bar} aria-label={t('player.label')}>
+        <span className={s.empty}>
+          <span className={s.placeholder}>
+            <Icon src={musicIcon} size={22} />
+          </span>
+          {t('player.empty')}
+        </span>
+      </footer>
+    );
+  }
+
+  const react = (r: 'like' | 'dislike') =>
+    void player.react(track, track.reaction === r ? null : r).catch(() => undefined);
+  const repeatLabel = t(`player.repeat_${st.repeat}`);
+
+  return (
+    <footer className={s.bar} aria-label={t('player.label')}>
+      <div className={s.now}>
+        <Cover album={track.album} size={52} />
+        <div className={s.meta}>
+          <span className={s.title}>{track.title}</span>
+          <span className={s.artists}>
+            <ArtistLinks artists={track.artists} />
+          </span>
+        </div>
+        <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={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')}
+        >
+          <Icon src={track.reaction === 'like' ? likeFillIcon : likeIcon} />
+        </button>
+      </div>
+
+      <div className={s.center}>
+        <div className={s.controls}>
+          <button
+            type="button"
+            className={cx(s.icon, st.shuffle && s.accent)}
+            aria-label={t('player.shuffle')}
+            aria-pressed={st.shuffle}
+            onClick={() => player.toggleShuffle()}
+          >
+            <Icon src={shuffleIcon} size={20} />
+          </button>
+          <button type="button" className={s.icon} aria-label={t('player.prev')} onClick={() => player.prev()}>
+            <Icon src={prevIcon} size={26} />
+          </button>
+          <button
+            type="button"
+            className={s.play}
+            aria-label={t(st.playing ? 'player.pause' : 'player.play')}
+            aria-busy={st.loading || undefined}
+            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()}>
+            <Icon src={nextIcon} size={26} />
+          </button>
+          <button
+            type="button"
+            className={cx(s.icon, st.repeat !== 'off' && s.accent)}
+            aria-label={repeatLabel}
+            title={repeatLabel}
+            onClick={() => player.cycleRepeat()}
+          >
+            <Icon src={st.repeat === 'one' ? repeatOneIcon : repeatIcon} size={20} />
+          </button>
+        </div>
+        <div className={s.progress}>
+          <span className={s.time}>{formatDuration(st.positionMs)}</span>
+          <input
+            type="range"
+            className={s.range}
+            min={0}
+            max={st.durationMs || track.duration_ms}
+            step={1000}
+            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))}
+            style={{ '--pct': `${(st.positionMs / (st.durationMs || track.duration_ms)) * 100}%` } as CSSProperties}
+          />
+          <span className={s.time}>{formatDuration(st.durationMs || track.duration_ms)}</span>
+        </div>
+        {st.error && (
+          <span className={s.error} role="status">
+            {t(st.error as 'player.error')}
+          </span>
+        )}
+      </div>
+
+      <div className={s.right}>
+        <button
+          type="button"
+          className={s.icon}
+          aria-label={t(st.muted ? 'player.unmute' : 'player.mute')}
+          onClick={() => player.toggleMute()}
+        >
+          <Icon src={st.muted || st.volume === 0 ? volumeOffIcon : volumeIcon} size={20} />
+        </button>
+        <input
+          type="range"
+          className={cx(s.range, s.volume)}
+          min={0}
+          max={1}
+          step={0.01}
+          value={st.muted ? 0 : st.volume}
+          aria-label={t('player.volume')}
+          onChange={(e) => player.setVolume(Number(e.target.value))}
+          style={{ '--pct': `${(st.muted ? 0 : st.volume) * 100}%` } as CSSProperties}
+        />
+      </div>
+    </footer>
+  );
+}