61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { AnimatePresence } from 'framer-motion';
|
|
import { useAuthStore } from './modules/auth/application/authStore';
|
|
import AuthPage from './modules/auth/presentation/AuthPage';
|
|
import ChatPage from './modules/chats/presentation/ChatPage';
|
|
import AdminPage from './modules/admin/presentation/pages/AdminPage';
|
|
import NotificationProvider from './core/presentation/components/ui/NotificationProvider';
|
|
|
|
export default function App() {
|
|
const { token, user, checkAuth, isLoading } = useAuthStore();
|
|
|
|
useEffect(() => {
|
|
checkAuth();
|
|
}, [checkAuth]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="h-full flex items-center justify-center bg-surface-container-lowest">
|
|
<div className="flex flex-col items-center gap-6">
|
|
<AppLoader />
|
|
<p className="text-on-surface-variant/40 text-[10px] font-black uppercase tracking-[0.3em] animate-pulse">Knot Loading</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Simple routing for admin
|
|
if (window.location.pathname.startsWith('/admin')) {
|
|
return <AdminPage />;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<AnimatePresence mode="wait">
|
|
{token && user ? (
|
|
<ChatPage key="chat" />
|
|
) : (
|
|
<AuthPage key="auth" />
|
|
)}
|
|
</AnimatePresence>
|
|
<NotificationProvider />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function AppLoader() {
|
|
return (
|
|
<div className="relative w-16 h-16">
|
|
<div className="absolute inset-0 rounded-3xl border-2 border-transparent border-t-primary animate-spin shadow-[0_0_15px_rgba(var(--primary-rgb),0.3)]" />
|
|
<div
|
|
className="absolute inset-2 rounded-3xl border-2 border-transparent border-t-primary/60 animate-spin"
|
|
style={{ animationDuration: '0.8s', animationDirection: 'reverse' }}
|
|
/>
|
|
<div
|
|
className="absolute inset-4 rounded-3xl border-2 border-transparent border-t-primary/30 animate-spin"
|
|
style={{ animationDuration: '0.6s' }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|