Arkie-Library-Frontend/src/App.tsx

import {
  BrowserRouter,
  Navigate,
  Route,
  Routes,
  useLocation,
  useParams,
} from "react-router-dom";
import { I18nProvider } from "./i18n";
import { MotionProvider } from "./motion";
import { ToastProvider } from "./components/Toast";
import { SaveToAlbumGuideProvider } from "./components/SaveToAlbumGuide";
import { InAppDownloadGuideProvider } from "./components/InAppDownloadGuide";
import { FavoritesProvider } from "./favorites/FavoritesProvider";
import { AutoInjectedLogin } from "./wallet/AutoInjectedLogin";
import { RainbowWalletProvider } from "./wallet/RainbowWalletProvider";
import { WalletLoginModal } from "./wallet/WalletLoginModal";
import { WalletProvider } from "./wallet/WalletProvider";
import { WalletStackErrorBoundary } from "./wallet/WalletStackErrorBoundary";
import { PublicLayout } from "./layouts/PublicLayout";
import { LocalizedHomePage } from "./pages/LocalizedHome";
import { Browse } from "./pages/Browse";
import { CategoriesPage } from "./pages/Categories";
import { CategoryPage } from "./pages/Category";
import { OfficialRecommendationsPage } from "./pages/OfficialRecommendations";
import { SearchPage } from "./pages/Search";
import { PostRedirect } from "./pages/PostRedirect";
import { ScrollToTop } from "./components/ScrollToTop";
import { PageTitleProvider } from "./components/PageTitleContext";
import Favorites from "./pages/Favorites";
import { adminUiPrefix } from "./adminPaths";
import { AdminRouteTree } from "./adminRouteTree";
import { AdminRouterModeProvider } from "./adminRouterMode";
import { ImageLightboxProvider } from "./components/messageStream/overlays/ImageLightbox";
import { VideoPlayerProvider } from "./components/messageStream/overlays/VideoPlayer";
import { legacyLanguageRedirects, localizedHomeRoutes } from "./languageRoutes";

/**
 * Redirects shared links that still use the old long-form language prefix
 * (e.g. /chinese, /malay/browse) to the new short codes (/cn, /ms/browse).
 * Preserves the sub-path, query string, and hash.
 */
function LegacyLangRedirect({ to }: { to: string }) {
  const params = useParams();
  const { search, hash } = useLocation();
  const splat = params["*"];
  const sub = splat ? `/${splat}` : "";
  return <Navigate to={`${to}${sub}${search}${hash}`} replace />;
}

const adminEnabled = import.meta.env.VITE_DISABLE_ADMIN !== "true";

export default function App() {
  return (
    <I18nProvider>
      <MotionProvider>
        <ToastProvider>
          <WalletProvider>
            <AutoInjectedLogin />
            <WalletStackErrorBoundary>
              <RainbowWalletProvider>
                <WalletLoginModal />
              </RainbowWalletProvider>
            </WalletStackErrorBoundary>
            <FavoritesProvider>
              <InAppDownloadGuideProvider>
                <SaveToAlbumGuideProvider>
                  <AdminRouterModeProvider value="absolute">
                    <ImageLightboxProvider>
                      <VideoPlayerProvider>
                        <PageTitleProvider>
                          <BrowserRouter>
                            <ScrollToTop />
                            <Routes>
                              <Route element={<PublicLayout />}>
                                <Route
                                  path="/"
                                  element={
                                    <LocalizedHomePage targetLang="en" />
                                  }
                                />
                                <Route path="/browse" element={<Browse />} />
                                <Route
                                  path="/categories"
                                  element={<CategoriesPage />}
                                />
                                <Route
                                  path="/official-recommendations"
                                  element={<OfficialRecommendationsPage />}
                                />
                                <Route
                                  path="/category/:slug"
                                  element={<CategoryPage />}
                                />
                                <Route
                                  path="/search"
                                  element={<SearchPage />}
                                />
                                <Route
                                  path="/resource/:id"
                                  element={<PostRedirect />}
                                />
                                <Route
                                  path="/favorites"
                                  element={<Favorites />}
                                />

                                {localizedHomeRoutes.map((route) => (
                                  <Route key={route.path} path={route.path}>
                                    <Route
                                      index
                                      element={
                                        <LocalizedHomePage
                                          targetLang={route.lang}
                                        />
                                      }
                                    />
                                    <Route path="browse" element={<Browse />} />
                                    <Route
                                      path="categories"
                                      element={<CategoriesPage />}
                                    />
                                    <Route
                                      path="official-recommendations"
                                      element={<OfficialRecommendationsPage />}
                                    />
                                    <Route
                                      path="category/:slug"
                                      element={<CategoryPage />}
                                    />
                                    <Route
                                      path="search"
                                      element={<SearchPage />}
                                    />
                                    <Route
                                      path="resource/:id"
                                      element={<PostRedirect />}
                                    />
                                    <Route
                                      path="favorites"
                                      element={<Favorites />}
                                    />
                                  </Route>
                                ))}
                              </Route>

                              {/* Legacy long-form language URLs → short-code
                                redirects. Shared links (e.g. WeChat) keep working. */}
                              {legacyLanguageRedirects.map((redirect) => (
                                <Route key={redirect.from}>
                                  <Route
                                    path={redirect.from}
                                    element={
                                      <LegacyLangRedirect to={redirect.to} />
                                    }
                                  />
                                  <Route
                                    path={`${redirect.from}/*`}
                                    element={
                                      <LegacyLangRedirect to={redirect.to} />
                                    }
                                  />
                                </Route>
                              ))}

                              {adminEnabled ? (
                                AdminRouteTree()
                              ) : (
                                <Route
                                  path={`${adminUiPrefix}/*`}
                                  element={<Navigate to="/" replace />}
                                />
                              )}

                              <Route
                                path="*"
                                element={<Navigate to="/" replace />}
                              />
                            </Routes>
                          </BrowserRouter>
                        </PageTitleProvider>
                      </VideoPlayerProvider>
                    </ImageLightboxProvider>
                  </AdminRouterModeProvider>
                </SaveToAlbumGuideProvider>
              </InAppDownloadGuideProvider>
            </FavoritesProvider>
          </WalletProvider>
        </ToastProvider>
      </MotionProvider>
    </I18nProvider>
  );
}