refactor(Routes): enhance page transition animations and improve Navbar styling; conditionally render user name in MainSidebar

src/renderer/src/Routes.tsx

@@ -89,18 +89,20 @@ const PageContainer = styled(motion.div)`
   width: 100%;
   height: 100%;
   z-index: 10;
+  will-change: transform;
+  backface-visibility: hidden;
 `
 
 const pageTransition = {
   type: 'tween',
-  duration: 0.15,
-  ease: 'easeInOut'
+  duration: 0.2,
+  ease: [0.4, 0.0, 0.2, 1]
 }
 
 const pageVariants = {
-  initial: { y: '100%' },
-  animate: { y: 0 },
-  exit: { y: '100%' }
+  initial: { translateY: '100%' },
+  animate: { translateY: '0%' },
+  exit: { translateY: '100%' }
 }
 
 export default RouteContainer

src/renderer/src/components/app/Navbar.tsx

@@ -60,7 +60,7 @@ const CloseIcon = () => {
       type="text"
       onClick={() => navigate('/')}
       className="nodrag"
-      style={{ marginRight: 2 }}
+      style={{ marginRight: 2, marginLeft: 5 }}
       icon={<CircleArrowLeft size={20} color="var(--color-icon)" style={{ marginTop: 2 }} />}
     />
   )

src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx

@@ -210,7 +210,7 @@ const MainSidebar: FC = () => {
           ) : (
             <AvatarImg src={avatar || UserAvatar} draggable={false} className="nodrag" />
           )}
-          <UserMenuText>{userName}</UserMenuText>
+          {userName && <UserMenuText>{userName}</UserMenuText>}
         </UserMenuLeft>
         <Tooltip title={t('settings.title')} mouseEnterDelay={0.8} placement="right">
           <Icon theme={theme} onClick={() => navigate('/settings/provider')} className="settings-icon">
@@ -289,6 +289,7 @@ const AvatarImg = styled(Avatar)`
 const UserMenuText = styled.div`
   font-size: 14px;
   font-weight: 500;
+  margin-right: 3px;
 `
 
 const Icon = styled.div<{ theme: string }>`

src/renderer/src/pages/settings/ProviderSettings/index.tsx

@@ -243,7 +243,7 @@ const ProvidersList: FC = () => {
   })
 
   useEffect(() => {
-    setTimeout(() => setReady(true), 250)
+    setTimeout(() => setReady(true), 200)
   }, [])
 
   if (!ready) {