feat: updates

packages/web/components/Topbar/Avatar.tsx

@@ -8,10 +8,12 @@ import BasicContextMenu from '../ContextMenus/BasicContextMenu'
 import { AnimatePresence } from 'framer-motion'
 import toast from 'react-hot-toast'
 import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
 
 const Avatar = ({ className }: { className?: string }) => {
   const { data: user } = useUser()
   const { t } = useTranslation()
+  const navigate = useNavigate()
 
   const avatarUrl = user?.profile?.avatarUrl
     ? resizeImage(user?.profile?.avatarUrl ?? '', 'sm')
@@ -36,10 +38,7 @@ const Avatar = ({ className }: { className?: string }) => {
               }
               setShowMenu(true)
             }}
-            className={cx(
-              'app-region-no-drag rounded-full',
-              className || 'h-12 w-12'
-            )}
+            className={cx('app-region-no-drag rounded-full', className || 'h-12 w-12')}
           />
           <AnimatePresence>
             {avatarRef.current && showMenu && (
@@ -63,7 +62,7 @@ const Avatar = ({ className }: { className?: string }) => {
                     type: 'item',
                     label: t`settings.settings`,
                     onClick: () => {
-                      toast('开发中')
+                      navigate('/settings')
                     },
                   },
                   {

packages/web/components/Topbar/SearchBox.tsx

@@ -1,4 +1,4 @@
-import { css, cx } from '@emotion/css'
+import { css, cx, keyframes } from '@emotion/css'
 import Icon from '../Icon'
 import { breakpoint as bp } from '@/web/utils/const'
 import { useNavigate } from 'react-router-dom'
@@ -10,6 +10,20 @@ import { useClickAway, useDebounce } from 'react-use'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useTranslation } from 'react-i18next'
 
+const bounce = keyframes`
+  from { transform: rotate(0deg) translateX(1px) rotate(0deg) }
+  to { transform: rotate(360deg) translateX(1px) rotate(-360deg) }
+`
+function SearchIcon({ isSearching }: { isSearching: boolean }) {
+  return (
+    <div
+    // style={{ animation: `${bounce} 1.2s linear infinite` }}
+    >
+      <Icon name='search' className='mr-2.5 h-7 w-7' />
+    </div>
+  )
+}
+
 const SearchSuggestions = ({
   searchText,
   isInputFocused,
@@ -144,7 +158,7 @@ const SearchBox = () => {
           `
         )}
       >
-        <Icon name='search' className='mr-2.5 h-7 w-7' />
+        <SearchIcon />
         <input
           ref={inputRef}
           placeholder={t`search.search`}

packages/web/components/Topbar/SettingsButton.tsx

@@ -1,11 +1,13 @@
 import Icon from '@/web/components/Icon'
 import { cx } from '@emotion/css'
 import toast from 'react-hot-toast'
+import { useNavigate } from 'react-router-dom'
 
 const SettingsButton = ({ className }: { className?: string }) => {
+  const navigate = useNavigate()
   return (
     <button
-      onClick={() => toast('开发中')}
+      onClick={() => navigate('/settings')}
       className={cx(
         'app-region-no-drag flex h-12 w-12 items-center justify-center rounded-full bg-day-600 text-neutral-500 transition duration-400 dark:bg-white/10 dark:hover:bg-white/20 dark:hover:text-neutral-300',
         className