Fix playlists route matching /play and improve playlists page UI

- Add isPlayerRoute() so /playlists no longer hides header and bottom nav
- Add mobile back navigation for playlists, favourites, and history
- Redesign PlaylistsPage with PageHeader, empty state, and card list

Co-authored-by: truewhile <truewhile@users.noreply.github.com>

web/src/components/Layout.tsx

@@ -8,7 +8,7 @@ import {
   LayoutWorkspace,
 } from './LayoutSections'
 import { MobileBottomNav } from './MobileBottomNav'
-import { shouldShowMobileBottomNav } from './layoutNavigation'
+import { isPlayerRoute, shouldShowMobileBottomNav } from './layoutNavigation'
 import { useLayoutPermissions } from './useLayoutPermissions'
 import { useLayoutProfiles } from './useLayoutProfiles'
 import { useLayoutSidebar } from './useLayoutSidebar'
@@ -26,7 +26,7 @@ function isMediaView(pathname: string, search: string): boolean {
     pathname === '/libraries' ||
     pathname.startsWith('/library') ||
     pathname.startsWith('/media') ||
-    pathname.startsWith('/play') ||
+    isPlayerRoute(pathname) ||
     pathname === '/favourites' ||
     pathname === '/playlists' ||
     pathname.startsWith('/playlist') ||
@@ -52,7 +52,7 @@ export function Layout() {
 
   const showSidebar = !isMediaView(location.pathname, location.search)
   const hideSearch = location.pathname.startsWith('/settings')
-  const isPlayPage = location.pathname.startsWith('/play')
+  const isPlayPage = isPlayerRoute(location.pathname)
   const showMobileBottomNav = shouldShowMobileBottomNav(location.pathname)
 
   return (

web/src/components/LayoutSections.tsx

@@ -3,6 +3,7 @@ import { AnimatePresence, motion } from 'framer-motion'
 import clsx from 'clsx'
 
 import { LayoutSidebarContent, type LayoutSidebarContentProps } from './LayoutSidebarContent'
+import { isPlayerRoute } from './layoutNavigation'
 import { RouteErrorBoundary } from './RouteErrorBoundary'
 import type { useLayoutSidebar } from './useLayoutSidebar'
 
@@ -125,7 +126,7 @@ export function LayoutWorkspace({ routeKey, showMobileBottomNav = false }: Layou
     ? 'pb-[calc(3.75rem+env(safe-area-inset-bottom,0px))] lg:pb-10'
     : ''
 
-  if (routeKey.startsWith('/play')) {
+  if (isPlayerRoute(routeKey)) {
     return (
       <main className="flex flex-1 h-full w-full overflow-hidden">
         <RouteErrorBoundary>

web/src/components/layoutNavigation.ts

@@ -76,6 +76,11 @@ export const MOBILE_BOTTOM_NAV_ITEMS: MobileBottomNavItem[] = [
 
 const ROOT_MEDIA_PATHS = new Set(['/', '/libraries', '/favourites', '/playlists', '/history'])
 
+/** True only for the fullscreen player route (`/play` or `/play/:id`), not `/playlists`. */
+export function isPlayerRoute(pathname: string): boolean {
+  return pathname === '/play' || pathname.startsWith('/play/')
+}
+
 export function isRootMediaPath(pathname: string): boolean {
   return ROOT_MEDIA_PATHS.has(pathname)
 }
@@ -84,6 +89,9 @@ export function resolveHeaderBack(pathname: string): HeaderBackTarget | null {
   if (pathname.startsWith('/library/')) {
     return { to: '/libraries', label: '媒体库' }
   }
+  if (pathname === '/playlists' || pathname === '/favourites' || pathname === '/history') {
+    return { to: '/', label: '首页' }
+  }
   if (pathname.startsWith('/playlist/')) {
     return { to: '/playlists', label: '播放列表' }
   }
@@ -118,7 +126,7 @@ export function resolveHeaderBack(pathname: string): HeaderBackTarget | null {
 }
 
 export function shouldShowMobileBottomNav(pathname: string): boolean {
-  if (pathname.startsWith('/play')) return false
+  if (isPlayerRoute(pathname)) return false
   return (
     pathname === '/' ||
     pathname === '/libraries' ||