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/AppShell.tsx

@@ -12,17 +12,32 @@ import {
   libraryFillIcon,
   libraryIcon,
   logoutIcon,
-  musicIcon,
+  historyFillIcon,
+  historyIcon,
+  likeFillIcon,
+  likeIcon,
+  dislikeFillIcon,
+  dislikeIcon,
   settingsIcon,
   storageFillIcon,
   storageIcon,
 } from '../shared/ui/icons';
 import { Avatar, Icon, Logo, Menu } from '../shared/ui/ui';
 import { LanguageSwitch } from './LanguageSwitch';
+import { PlayerProvider } from '../player/context';
+import { PlayerBar } from './PlayerBar';
 import { SearchBox } from './SearchBox';
 import s from './AppShell.module.css';
 
-type NavPath = '/' | '/admin/users' | '/admin/audit' | '/admin/sources' | '/admin/library';
+type NavPath =
+  | '/'
+  | '/admin/users'
+  | '/admin/audit'
+  | '/admin/sources'
+  | '/admin/library'
+  | '/collection/history'
+  | '/collection/likes'
+  | '/collection/dislikes';
 
 function NavLink({ to, label, icon, activeIcon }: { to: NavPath; label: string; icon: string; activeIcon: string }) {
   return (
@@ -39,7 +54,11 @@ function NavLink({ to, label, icon, activeIcon }: { to: NavPath; label: string;
 
 /** Между выходом и редиректом на /login каркас не рисуется: пользователя уже нет. */
 export function AppShell() {
-  return useAuthState().status === 'signed_in' ? <Shell /> : null;
+  return useAuthState().status === 'signed_in' ? (
+    <PlayerProvider>
+      <Shell />
+    </PlayerProvider>
+  ) : null;
 }
 
 function Shell() {
@@ -84,6 +103,10 @@ function Shell() {
 
       <nav className={s.side} aria-label={t('nav.main')}>
         <NavLink to="/" label={t('nav.home')} icon={homeIcon} activeIcon={homeFillIcon} />
+        <div className={s.navSection}>{t('nav.collection')}</div>
+        <NavLink to="/collection/history" label={t('nav.history')} icon={historyIcon} activeIcon={historyFillIcon} />
+        <NavLink to="/collection/likes" label={t('nav.likes')} icon={likeIcon} activeIcon={likeFillIcon} />
+        <NavLink to="/collection/dislikes" label={t('nav.dislikes')} icon={dislikeIcon} activeIcon={dislikeFillIcon} />
         {staff && (
           <>
             <div className={s.navSection}>{t('nav.admin')}</div>
@@ -103,12 +126,7 @@ function Shell() {
         <Outlet />
       </main>
 
-      <footer className={s.player} aria-label={t('player.empty')}>
-        <span className={s.cover}>
-          <Icon src={musicIcon} size={22} />
-        </span>
-        <span className={s.playerEmpty}>{t('player.empty')}</span>
-      </footer>
+      <PlayerBar />
     </div>
   );
 }