feat: updates

packages/web/components/New/Topbar/Avatar.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css'
 import Icon from '../../Icon'
 import { resizeImage } from '@/web/utils/common'
 import useUser from '@/web/api/hooks/useUser'
-import { state } from '@/web/store'
+import uiStates from '@/web/states/uiStates'
 
 const Avatar = ({ className }: { className?: string }) => {
   const { data: user } = useUser()
@@ -16,7 +16,7 @@ const Avatar = ({ className }: { className?: string }) => {
       {avatarUrl ? (
         <img
           src={avatarUrl}
-          onClick={() => (state.uiStates.showLoginPanel = true)}
+          onClick={() => (uiStates.showLoginPanel = true)}
           className={cx(
             'app-region-no-drag rounded-full',
             className || 'h-12 w-12'
@@ -24,7 +24,7 @@ const Avatar = ({ className }: { className?: string }) => {
         />
       ) : (
         <div
-          onClick={() => (state.uiStates.showLoginPanel = true)}
+          onClick={() => (uiStates.showLoginPanel = true)}
           className={cx(
             'rounded-full bg-day-600 p-2.5 dark:bg-night-600',
             className || 'h-12 w-12'

packages/web/components/New/Topbar/TopbarDesktop.tsx

@@ -1,32 +1,55 @@
 import { css, cx } from '@emotion/css'
-import { useLocation } from 'react-router-dom'
 import Avatar from './Avatar'
 import SearchBox from './SearchBox'
 import SettingsButton from './SettingsButton'
 import NavigationButtons from './NavigationButtons'
 import topbarBackground from '@/web/assets/images/topbar-background.png'
+import uiStates from '@/web/states/uiStates'
+import { useSnapshot } from 'valtio'
+import { AnimatePresence, motion } from 'framer-motion'
+import { ease } from '@/web/utils/const'
+
+const Background = () => {
+  const { hideTopbarBackground } = useSnapshot(uiStates)
+
+  return (
+    <>
+      <AnimatePresence>
+        {!hideTopbarBackground && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ ease }}
+            className={cx(
+              'absolute inset-0 z-0 bg-contain bg-repeat-x',
+              css`
+                background-image: url(${topbarBackground});
+              `
+            )}
+          ></motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  )
+}
 
 const TopbarDesktop = () => {
-  const location = useLocation()
-
   return (
     <div
       className={cx(
-        'app-region-drag fixed top-0 right-0 z-20 flex items-center justify-between overflow-hidden rounded-tr-24 bg-contain pt-11 pb-10 pr-6 pl-10',
+        'app-region-drag fixed top-0 left-0 right-0 z-20 flex items-center justify-between overflow-hidden bg-contain pt-11 pb-10 pr-6',
         css`
-          left: 104px;
+          padding-left: 144px;
         `,
-        !location.pathname.startsWith('/album/') &&
-          !location.pathname.startsWith('/playlist/') &&
-          !location.pathname.startsWith('/browse') &&
-          !location.pathname.startsWith('/artist') &&
-          css`
-            background-image: url(${topbarBackground});
-          `
+        window.env?.isElectron && 'rounded-t-24'
       )}
     >
+      {/* Background */}
+      <Background />
+
       {/* Left Part */}
-      <div className='flex items-center'>
+      <div className='z-10 flex items-center'>
         <NavigationButtons />
 
         {/* Dividing line */}
@@ -36,7 +59,7 @@ const TopbarDesktop = () => {
       </div>
 
       {/* Right Part */}
-      <div className='flex'>
+      <div className='z-10 flex'>
         <SettingsButton />
         <Avatar className='ml-3 h-12 w-12' />
       </div>