Add persistent now-playing bar to dashboard

src/apps/admin/layout/Dashboard.scss

@@ -17,8 +17,9 @@
 
     &__outlet {
       padding: var(--dashboard-gutter);
+      padding-bottom: 5rem;
       height: 100%;
-    } 
+    }
   }
 }
 

src/apps/admin/layout/Dashboard.tsx

@@ -2,6 +2,7 @@ import { createContext, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { Outlet } from 'react-router-dom'
 import { selectCurrentJukebox, selectCurrentMembership } from 'src/store'
+import { NowPlayingBar } from 'src/components'
 import { Sidebar, Topbar } from '../components'
 import './Dashboard.scss'
 
@@ -52,6 +53,7 @@ export const Dashboard = () => {
             <Outlet />
           </div>
         </div>
+        <NowPlayingBar />
       </div>
     </AdminContext.Provider>
   )

src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './audio-player'
 export * from './form'
+export * from './now-playing-bar'
 export * from './overlays'
 export * from './track-list/TrackItem'
 export * from './track-list/TrackList'

src/components/now-playing-bar/NowPlayingBar.scss

@@ -0,0 +1,87 @@
+.now-playing-bar {
+  position: fixed;
+  bottom: 0;
+  left: var(--sidebar-width);
+  right: 0;
+  height: 4.5rem;
+  z-index: 50;
+  @include color-role('surface');
+  border-top: $border-thin;
+
+  &__progress-line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 3px;
+    background-color: var(--color-primary-contrast);
+    transition: width 1s linear;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0 1.5rem;
+    gap: 1rem;
+  }
+
+  &__track {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    flex: 1;
+
+    &__name {
+      @include font-label('md');
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &__artists {
+      @include font-body('sm');
+      color: var(--color-label);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+
+    &__btn {
+      background: none;
+      border: none;
+      padding: 0.5rem;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 100px;
+      color: var(--color-primary-contrast);
+
+      svg {
+        width: 2rem;
+        height: 2rem;
+      }
+    }
+  }
+
+  &__time {
+    @include font-body('sm');
+    color: var(--color-label);
+    display: flex;
+    gap: 0.25rem;
+    white-space: nowrap;
+  }
+}
+
+@include breakpoint('lg') {
+  .now-playing-bar {
+    left: 0;
+  }
+}

src/components/now-playing-bar/NowPlayingBar.tsx

@@ -0,0 +1,59 @@
+import { useContext } from 'react'
+import { useLocation } from 'react-router-dom'
+import NextIcon from 'src/assets/svg/NextIcon.svg?react'
+import PauseIcon from 'src/assets/svg/PauseIcon.svg?react'
+import PlayIcon from 'src/assets/svg/PlayIcon.svg?react'
+import PreviousIcon from 'src/assets/svg/PreviousIcon.svg?react'
+import { PlayerContext } from 'src/context'
+import { formatDuration } from 'src/utils'
+import './NowPlayingBar.scss'
+
+const ROUTES_WITH_PLAYER = ['/dashboard', '/dashboard/player', '/dashboard/debug']
+
+export const NowPlayingBar = () => {
+  const { currentTrack, playerState, liveProgress, togglePlay, nextTrack, prevTrack } =
+    useContext(PlayerContext)
+
+  const location = useLocation()
+
+  const hideBar = ROUTES_WITH_PLAYER.includes(location.pathname)
+
+  if (hideBar || !currentTrack?.name) return null
+
+  const progress = liveProgress ?? 0
+  const duration = currentTrack.duration_ms ?? 0
+  const progressPercent = duration > 0 ? (progress / duration) * 100 : 0
+
+  return (
+    <div className="now-playing-bar">
+      <div
+        className="now-playing-bar__progress-line"
+        style={{ width: `${Math.min(progressPercent, 100)}%` }}
+      />
+      <div className="now-playing-bar__content">
+        <div className="now-playing-bar__track">
+          <span className="now-playing-bar__track__name">{currentTrack.name}</span>
+          <span className="now-playing-bar__track__artists">
+            {currentTrack.artists?.join(', ') || 'Unknown Artist'}
+          </span>
+        </div>
+        <div className="now-playing-bar__controls">
+          <button className="now-playing-bar__controls__btn" onClick={prevTrack}>
+            <PreviousIcon />
+          </button>
+          <button className="now-playing-bar__controls__btn" onClick={togglePlay}>
+            {playerState?.is_playing ? <PauseIcon /> : <PlayIcon />}
+          </button>
+          <button className="now-playing-bar__controls__btn" onClick={nextTrack}>
+            <NextIcon />
+          </button>
+        </div>
+        <div className="now-playing-bar__time">
+          <span>{formatDuration(progress)}</span>
+          <span>/</span>
+          <span>{formatDuration(duration)}</span>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/now-playing-bar/index.ts

@@ -0,0 +1 @@
+export * from './NowPlayingBar'