feat: updates

packages/web/pages/Album.tsx

@@ -7,7 +7,7 @@ import Icon from '@/web/components/Icon'
 import TracksAlbum from '@/web/components/TracksAlbum'
 import useAlbum from '@/web/api/hooks/useAlbum'
 import useArtistAlbums from '@/web/api/hooks/useArtistAlbums'
-import { player } from '@/web/store'
+import player from '@/web/states/player'
 import {
   Mode as PlayerMode,
   State as PlayerState,

packages/web/pages/Artist.tsx

@@ -9,7 +9,7 @@ import TracksGrid from '@/web/components/TracksGrid'
 import CoverRow, { Subtitle } from '@/web/components/CoverRow'
 import Skeleton from '@/web/components/Skeleton'
 import useTracks from '@/web/api/hooks/useTracks'
-import { player } from '@/web/store'
+import player from '@/web/states/player'
 import { cx } from '@emotion/css'
 import { useCallback, useMemo } from 'react'
 import toast from 'react-hot-toast'

packages/web/pages/Library.tsx

@@ -5,7 +5,7 @@ import useLyric from '@/web/api/hooks/useLyric'
 import usePlaylist from '@/web/api/hooks/usePlaylist'
 import useUser from '@/web/api/hooks/useUser'
 import useUserPlaylists from '@/web/api/hooks/useUserPlaylists'
-import { player } from '@/web/store'
+import player from '@/web/states/player'
 import { resizeImage } from '@/web/utils/common'
 import { sample, chunk } from 'lodash-es'
 import useUserArtists from '@/web/api/hooks/useUserArtists'

packages/web/pages/New/Album.tsx

@@ -4,7 +4,7 @@ import useTracks from '@/web/api/hooks/useTracks'
 import { NavLink, useParams } from 'react-router-dom'
 import PageTransition from '@/web/components/New/PageTransition'
 import TrackList from '@/web/components/New/TrackList'
-import { player } from '@/web/store'
+import player from '@/web/states/player'
 import toast from 'react-hot-toast'
 import { useSnapshot } from 'valtio'
 import useArtistAlbums from '@/web/api/hooks/useArtistAlbums'
@@ -113,9 +113,13 @@ const Album = () => {
 
   return (
     <PageTransition>
-      <TrackListHeader album={album?.album} onPlay={onPlay} />
+      <TrackListHeader
+        album={album?.album}
+        onPlay={onPlay}
+        className='mt-2.5 lg:mt-0'
+      />
       <TrackList
-        tracks={tracks?.songs || album?.songs || album?.album.songs}
+        tracks={tracks?.songs || album?.album.songs || album?.songs}
         className='z-10 mx-2.5 mt-3 lg:mx-0 lg:mt-10'
         onPlay={onPlay}
       />

packages/web/pages/New/Artist/Header/ArtistInfo.tsx

@@ -7,7 +7,7 @@ const ArtistInfo = ({ artist }: { artist?: Artist }) => {
       <div className='text-28 font-semibold text-night-50 lg:text-32'>
         {artist?.name}
       </div>
-      <div className='mt-2.5 text-24 font-medium text-night-400 lg:mt-6'>
+      <div className='text-white-400 mt-2.5 text-24 font-medium lg:mt-6'>
         Artist
       </div>
       <div className='mt-1 text-12 font-medium text-night-400'>

packages/web/pages/New/Artist/Header/BlurBackground.tsx

@@ -1,26 +0,0 @@
-import { resizeImage } from '@/web/utils/common'
-import { cx, css } from '@emotion/css'
-import useIsMobile from '@/web/hooks/useIsMobile'
-
-const BlurBackground = ({ cover }: { cover?: string }) => {
-  const isMobile = useIsMobile()
-  return isMobile || !cover ? (
-    <></>
-  ) : (
-    <img
-      className={cx(
-        'absolute z-0 object-cover opacity-70',
-        css`
-          top: -400px;
-          left: -370px;
-          width: 1572px;
-          height: 528px;
-          filter: blur(256px) saturate(1.2);
-        `
-      )}
-      src={resizeImage(cover, 'sm')}
-    />
-  )
-}
-
-export default BlurBackground

packages/web/pages/New/Artist/Header/Header.tsx

@@ -1,9 +1,8 @@
 import { resizeImage } from '@/web/utils/common'
 import { cx, css } from '@emotion/css'
 import Image from '@/web/components/New/Image'
-import { useMemo } from 'react'
 import { breakpoint as bp } from '@/web/utils/const'
-import BlurBackground from './BlurBackground'
+import BlurBackground from '@/web/components/New/BlurBackground'
 import ArtistInfo from './ArtistInfo'
 import Actions from './Actions'
 import LatestRelease from './LatestRelease'

packages/web/pages/New/Artist/Header/LatestRelease.tsx

@@ -37,11 +37,11 @@ const Album = () => {
           `
         )}
       />
-      <div className='ml-2 flex-shrink-1'>
-        <div className='font-medium line-clamp-1 text-16 text-night-100'>
+      <div className='flex-shrink-1 ml-2'>
+        <div className='line-clamp-1 text-16 font-medium text-night-100'>
           {album.name}
         </div>
-        <div className='mt-1 font-bold text-14 text-night-500'>
+        <div className='mt-1 text-14 font-bold text-night-500'>
           {album.type}
           {album.size > 1 ? `· ${album.size} Tracks` : ''}
         </div>
@@ -69,8 +69,8 @@ const Video = () => {
           `
         )}
       />
-      <div className='ml-2 flex-shrink-1'>
-        <div className='font-medium line-clamp-2 text-16 text-night-100'>
+      <div className='flex-shrink-1 ml-2'>
+        <div className='line-clamp-2 text-16 font-medium text-night-100'>
           Swedish House Mafia & The Weeknd Live at C...
         </div>
         <div className='mt-1.5 text-12 font-medium text-night-500'>
@@ -84,7 +84,7 @@ const Video = () => {
 const LatestRelease = () => {
   return (
     <div className='mx-2.5 lg:mx-0'>
-      <div className='mb-3 font-bold mt-7 text-14 text-neutral-300'>
+      <div className='mb-3 mt-7 text-14 font-bold text-neutral-300'>
         Latest Releases
       </div>
 

packages/web/pages/New/Artist/Popular.tsx

@@ -1,5 +1,5 @@
 import { resizeImage } from '@/web/utils/common'
-import { player } from '@/web/store'
+import player from '@/web/states/player'
 import { State as PlayerState } from '@/web/utils/player'
 import useTracks from '@/web/api/hooks/useTracks'
 import { css, cx } from '@emotion/css'

packages/web/pages/New/Browse.tsx

@@ -82,7 +82,7 @@ const Browse = () => {
         tabs={categories}
         value={active}
         onChange={category => setActive(category)}
-        className='sticky top-0 z-10 px-2.5 lg:px-0'
+        className='sticky top-0 z-10 mt-2.5 px-2.5 lg:mt-0 lg:px-0'
       />
 
       <div className='relative mx-2.5 mt-5 lg:mx-0'>

packages/web/pages/New/Discover.tsx

@@ -106,7 +106,7 @@ const Discover = () => {
 
   return (
     <PageTransition disableEnterAnimation={true}>
-      <div className='mx-2.5 pb-10 lg:mx-0 lg:pb-16'>
+      <div className='mx-2.5 mt-2.5 pb-10 lg:mx-0 lg:mt-0 lg:pb-16'>
         <CoverWall albums={albums || []} />
       </div>
     </PageTransition>

packages/web/pages/New/My/Collections.tsx

@@ -5,6 +5,8 @@ import { useMemo, useState } from 'react'
 import CoverRow from '@/web/components/New/CoverRow'
 import useUserPlaylists from '@/web/api/hooks/useUserPlaylists'
 import useUserAlbums from '@/web/api/hooks/useUserAlbums'
+import { useSnapshot } from 'valtio'
+import uiStates from '@/web/states/uiStates'
 
 const tabs = [
   {
@@ -39,7 +41,12 @@ const Playlists = () => {
 
 const Collections = () => {
   // const { data: artists } = useUserArtists()
-  const [selectedTab, setSelectedTab] = useState(tabs[0].id)
+  const { librarySelectedTab: selectedTab } = useSnapshot(uiStates)
+  const setSelectedTab = (
+    id: 'playlists' | 'albums' | 'artists' | 'videos'
+  ) => {
+    uiStates.librarySelectedTab = id
+  }
 
   return (
     <div>

packages/web/pages/New/My/PlayLikedSongsCard.tsx

@@ -1,7 +1,7 @@
 import useLyric from '@/web/api/hooks/useLyric'
 import usePlaylist from '@/web/api/hooks/usePlaylist'
 import useUserPlaylists from '@/web/api/hooks/useUserPlaylists'
-import { player } from '@/web/store'
+import player from '@/web/states/player'
 import { sample, chunk, sampleSize } from 'lodash-es'
 import { css, cx } from '@emotion/css'
 import { useState, useEffect, useMemo, useCallback, memo } from 'react'

packages/web/pages/New/Playlist.tsx

@@ -2,13 +2,13 @@ import TrackListHeader from '@/web/components/New/TrackListHeader'
 import { NavLink, useParams } from 'react-router-dom'
 import PageTransition from '@/web/components/New/PageTransition'
 import TrackList from '@/web/components/New/TrackList'
-import { player } from '@/web/store'
+import player from '@/web/states/player'
 import toast from 'react-hot-toast'
 import { useSnapshot } from 'valtio'
 import { memo, useEffect, useMemo } from 'react'
 import usePlaylist from '@/web/api/hooks/usePlaylist'
 import useTracksInfinite from '@/web/api/hooks/useTracksInfinite'
-import useScroll from '@/web/hooks/useScroll'
+
 const Playlist = () => {
   const params = useParams()
   const { data: playlist, isLoading } = usePlaylist({
@@ -35,7 +35,11 @@ const Playlist = () => {
 
   return (
     <PageTransition>
-      <TrackListHeader playlist={playlist?.playlist} onPlay={onPlay} />
+      <TrackListHeader
+        playlist={playlist?.playlist}
+        onPlay={onPlay}
+        className='mt-2.5 lg:mt-0'
+      />
       <TrackList
         tracks={playlist?.playlist?.tracks ?? []}
         onPlay={onPlay}

packages/web/pages/Playlist.tsx

@@ -6,7 +6,7 @@ import TracksList from '@/web/components/TracksList'
 import usePlaylist from '@/web/api/hooks/usePlaylist'
 import useScroll from '@/web/hooks/useScroll'
 import useTracksInfinite from '@/web/api/hooks/useTracksInfinite'
-import { player } from '@/web/store'
+import player from '@/web/states/player'
 import { formatDate, resizeImage } from '@/web/utils/common'
 import useUserPlaylists, {
   useMutationLikeAPlaylist,

packages/web/pages/Search/Search.tsx

@@ -1,7 +1,7 @@
 import { multiMatchSearch, search } from '@/web/api/search'
 import Cover from '@/web/components/Cover'
 import TrackGrid from '@/web/components/TracksGrid'
-import { player } from '@/web/store'
+import player from '@/web/states/player'
 import { resizeImage } from '@/web/utils/common'
 import { SearchTypes, SearchApiNames } from '@/shared/api/Search'
 import dayjs from 'dayjs'

packages/web/pages/Settings/Appearance.tsx

@@ -1,4 +1,4 @@
-import { state } from '@/web/store'
+import settings from '@/web/states/settings'
 import { changeAccentColor } from '@/web/utils/theme'
 import { useSnapshot } from 'valtio'
 import { cx } from '@emotion/css'
@@ -25,11 +25,11 @@ const AccentColor = () => {
   }
 
   const changeColor = (color: string) => {
-    state.settings.accentColor = color
+    settings.accentColor = color
     changeAccentColor(color)
   }
 
-  const accentColor = useSnapshot(state).settings.accentColor
+  const accentColor = useSnapshot(settings).accentColor
   return (
     <div className='mt-4'>
       <div className='mb-2 dark:text-white'>强调色</div>