feat: updates

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

@@ -1,11 +1,10 @@
 import { css, cx } from '@emotion/css'
-import { useNavigate } from 'react-router-dom'
 import Icon from '../../Icon'
 import { resizeImage } from '@/web/utils/common'
 import useUser from '@/web/api/hooks/useUser'
+import { state } from '@/web/store'
 
 const Avatar = ({ className }: { className?: string }) => {
-  const navigate = useNavigate()
   const { data: user } = useUser()
 
   const avatarUrl = user?.profile?.avatarUrl
@@ -17,7 +16,7 @@ const Avatar = ({ className }: { className?: string }) => {
       {avatarUrl ? (
         <img
           src={avatarUrl}
-          onClick={() => navigate('/login')}
+          onClick={() => (state.uiStates.showLoginPanel = true)}
           className={cx(
             'app-region-no-drag rounded-full',
             className || 'h-12 w-12'
@@ -25,7 +24,7 @@ const Avatar = ({ className }: { className?: string }) => {
         />
       ) : (
         <div
-          onClick={() => navigate('/login')}
+          onClick={() => (state.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/SearchBox.tsx

@@ -1,8 +1,13 @@
 import { css, cx } from '@emotion/css'
 import Icon from '../../Icon'
 import { breakpoint as bp } from '@/web/utils/const'
+import { useNavigate } from 'react-router-dom'
+import { useState } from 'react'
 
 const SearchBox = () => {
+  const navigate = useNavigate()
+  const [searchText, setSearchText] = useState('')
+
   return (
     <div
       className={cx(
@@ -25,6 +30,13 @@ const SearchBox = () => {
             }
           `
         )}
+        value={searchText}
+        onChange={e => setSearchText(e.target.value)}
+        onKeyDown={e => {
+          if (e.key !== 'Enter') return
+          e.preventDefault()
+          navigate(`/search/${searchText}`)
+        }}
       />
     </div>
   )

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

@@ -19,6 +19,7 @@ const TopbarDesktop = () => {
         !location.pathname.startsWith('/album/') &&
           !location.pathname.startsWith('/playlist/') &&
           !location.pathname.startsWith('/browse') &&
+          !location.pathname.startsWith('/artist') &&
           css`
             background-image: url(${topbarBackground});
           `

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

@@ -1,11 +1,11 @@
-import { css } from '@emotion/css'
+import { css, cx } from '@emotion/css'
 import Avatar from './Avatar'
 import SearchBox from './SearchBox'
 import SettingsButton from './SettingsButton'
 
 const TopbarMobile = () => {
   return (
-    <div className='mb-5 mt-7 flex px-2.5'>
+    <div className='mb-5 mt-10 flex px-2.5'>
       <div className='flex-grow'>
         <SearchBox />
       </div>