Redesign the UI

frontend/src/App.tsx

@@ -1,23 +1,25 @@
-import { BrowserRouter, Routes, Route, useNavigate, matchRoutes, type RouteObject } from "react-router-dom";
+import { BrowserRouter, Routes, Route, useNavigate, useLocation, matchRoutes, Navigate, type RouteObject } from "react-router-dom";
+import { AnimatePresence, motion } from "motion/react";
 import { ElectronTitleBar } from "./Electron";
 import { useAppState } from "./pages/chat/state";
-import { lazy, useEffect, useState } from "react";
+import { lazy, useEffect, useRef, useState } from "react";
 import { parseProfileLink } from "./core/profileLinks";
 import NotFoundPage from "./pages/not-found/NotFoundPage";
 import ProtectedRoute from "./pages/ProtectedRoute";
 import DownloadAppPage from "./pages/download-app/DownloadAppPage";
 import { SuspensionDialog } from "./pages/chat/ui/SuspensionDialog";
+import { delay } from "./utils/utils";
 
 // Lazy load route components
 const HomePage = lazy(() => import("./pages/home/HomePage"));
-const LoginPage = lazy(() => import("./pages/auth/LoginPage"));
-const RegisterPage = lazy(() => import("./pages/auth/RegisterPage"));
+const AuthPage = lazy(() => import("./pages/auth/AuthPage"));
 const ChatPage = lazy(() => import("./pages/chat/ui/ChatPage"));
 
 const routeConfig: RouteObject[] = [
     { path: "/", element: <HomePage /> },
-    { path: "/login", element: <LoginPage /> },
-    { path: "/register", element: <RegisterPage /> },
+    { path: "/auth", element: <AuthPage /> },
+    { path: "/login", element: <Navigate to="/auth?mode=login" replace /> },
+    { path: "/register", element: <Navigate to="/auth?mode=register" replace /> },
     { path: "/download-app", element: <DownloadAppPage /> },
     {
         path: "/chat",
@@ -66,6 +68,54 @@ function SmartCatchAll() {
     }
 }
 
+function AnimatedRoutes() {
+    const location = useLocation();
+    const prevPathnameRef = useRef(location.pathname);
+
+    return (
+        <AnimatePresence mode="sync" initial={false}>
+            <motion.div
+                key={location.pathname}
+                onAnimationStart={() => {
+                    if (prevPathnameRef.current !== location.pathname) {
+                        prevPathnameRef.current = location.pathname;
+                        document.body.style.overflow = "hidden";
+                    }
+                }}
+                onAnimationComplete={async () => {
+                    await delay(500);
+                    document.body.style.overflow = "";
+                }}
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 1, scale: 1.1 }}
+                transition={{ 
+                    type: "spring",
+                    stiffness: 300,
+                    damping: 30,
+                    mass: 0.8
+                }}
+                style={{ 
+                    transformOrigin: "center center",
+                    width: "100%",
+                    height: "100%",
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0
+                }}
+            >
+                <Routes location={location}>
+                    {routeConfig.map((route, index) => (
+                        <Route key={index} path={route.path} element={route.element} />
+                    ))}
+                </Routes>
+            </motion.div>
+        </AnimatePresence>
+    );
+}
+
 export default function App() {
     const { restoreUserFromStorage, user } = useAppState();
     const [authReady, setAuthReady] = useState(false);
@@ -80,11 +130,7 @@ export default function App() {
         <BrowserRouter>
             <ElectronTitleBar />
             <div id="main-wrapper">
-                <Routes>
-                    {routeConfig.map((route, index) => (
-                        <Route key={index} path={route.path} element={route.element} />
-                    ))}
-                </Routes>
+                <AnimatedRoutes />
             </div>
             {user.isSuspended && (
                 <SuspensionDialog