glchat/web/src/App.tsx

import { lazy, Suspense } from 'react';
import { createBrowserRouter, Navigate, RouterProvider } from 'react-router';

import { AuthGuard } from '@/components/AuthGuard';
import { LoadingNotice } from '@/components/ui/ErrorNotice';
import { useCurrentUser } from '@/lib/hooks';
import '@/i18n';

const LoginPage = lazy(() => import('@/pages/LoginPage'));
const RegisterPage = lazy(() => import('@/pages/RegisterPage'));
const OnboardingPage = lazy(() => import('@/pages/OnboardingPage'));
const StatusPage = lazy(() => import('@/pages/StatusPage'));
const AppLayout = lazy(() => import('@/pages/app/AppLayout'));
const GuildView = lazy(() => import('@/pages/app/GuildView'));
const NoGuildView = lazy(() => import('@/pages/app/NoGuildView'));
const SettingsLayout = lazy(() => import('@/pages/settings/SettingsLayout'));
const ProfileSettingsPage = lazy(() => import('@/pages/settings/ProfileSettingsPage'));
const SecuritySettingsPage = lazy(() => import('@/pages/settings/SecuritySettingsPage'));
const AppearanceSettingsPage = lazy(() => import('@/pages/settings/AppearanceSettingsPage'));
const InstanceSettingsPage = lazy(() => import('@/pages/settings/InstanceSettingsPage'));

/** `/` — редирект по состоянию сессии. */
function IndexRedirect() {
  const currentUser = useCurrentUser();
  if (currentUser.isPending) {
    return (
      <div className="flex min-h-full items-center justify-center p-6">
        <LoadingNotice />
      </div>
    );
  }
  return <Navigate to={currentUser.isSuccess ? '/app' : '/login'} replace />;
}

/** Общая заглушка на время загрузки ленивых страниц. */
export function RouteFallback() {
  return (
    <div className="flex min-h-full items-center justify-center p-6">
      <LoadingNotice />
    </div>
  );
}

export const routes = [
  {
    path: '/',
    children: [
      { index: true, element: <IndexRedirect /> },
      { path: 'login', element: <LoginPage /> },
      { path: 'register', element: <RegisterPage /> },
      { path: 'status', element: <StatusPage /> },
      {
        element: <AuthGuard allowIncompleteOnboarding />,
        children: [{ path: 'onboarding', element: <OnboardingPage /> }],
      },
      {
        element: <AuthGuard />,
        children: [
          {
            path: 'app',
            element: <AppLayout />,
            children: [
              { index: true, element: <Navigate to="empty" replace /> },
              { path: 'empty', element: <NoGuildView /> },
              { path: ':guildId', element: <GuildView /> },
              { path: ':guildId/:channelId', element: <GuildView /> },
            ],
          },
        ],
      },
      {
        element: <AuthGuard allowIncompleteOnboarding />,
        children: [
          {
            path: 'settings',
            element: <SettingsLayout />,
            children: [
              { index: true, element: <Navigate to="profile" replace /> },
              { path: 'profile', element: <ProfileSettingsPage /> },
              { path: 'security', element: <SecuritySettingsPage /> },
              { path: 'appearance', element: <AppearanceSettingsPage /> },
              { path: 'instance', element: <InstanceSettingsPage /> },
            ],
          },
        ],
      },
      { path: '*', element: <Navigate to="/" replace /> },
    ],
  },
];

export const router = createBrowserRouter(routes);

export function App() {
  return (
    <Suspense fallback={<RouteFallback />}>
      <RouterProvider router={router} />
    </Suspense>
  );
}