Genarrative/src/main.tsx

/* eslint-disable react-refresh/only-export-components */

import '@genarrative/image-canvas-react/styles.css';
import 'overlayscrollbars/styles/overlayscrollbars.css';
import './index.css';

import { StrictMode, Suspense } from 'react';
import { createRoot } from 'react-dom/client';

import { FloatingFeedbackEntry } from './components/common/FloatingFeedbackEntry';
import { getInitialPlatformDesktopLayout } from './components/platform-entry/platformEntryResponsive';
import { stabilizeMobileViewportKeyboardFocus } from './mobileViewportKeyboardFocus';
import { lockMobileViewportZoom } from './mobileViewportZoomLock';
import {
  resolveAppRoute,
  shouldUseRecommendationRouteLoading,
} from './routing/appRoutes';
import { RouteImageReadyGate } from './routing/RouteImageReadyGate';
import { RouteLoadingScreen } from './routing/RouteLoadingScreen';
import {
  getHostRuntime,
  refreshNativeAppHostRuntime,
} from './services/host-bridge/hostBridge';

type AppRoot = ReturnType<typeof createRoot>;

declare global {
  interface Window {
    __tavernRealmsRoot__?: AppRoot;
  }
}

const route = resolveAppRoute(window.location.pathname);
const rootElement = document.getElementById('root');

if (!rootElement) {
  throw new Error('Missing #root container');
}

function markWechatMiniProgramRuntime() {
  if (getHostRuntime().kind === 'wechat_mini_program') {
    document.documentElement.dataset.wechatMiniProgramRuntime = 'true';
  }
}

const root = (window.__tavernRealmsRoot__ ??= createRoot(rootElement));
const RouteComponent = route.Component;
const routeElement = <RouteComponent {...(route.componentProps ?? {})} />;
const shouldGateRouteImages = shouldUseRecommendationRouteLoading(
  window.location.pathname,
  getInitialPlatformDesktopLayout(),
);

lockMobileViewportZoom();
stabilizeMobileViewportKeyboardFocus();
markWechatMiniProgramRuntime();
void refreshNativeAppHostRuntime();

root.render(
  <StrictMode>
    <Suspense
      fallback={
        shouldGateRouteImages ? (
          <RouteLoadingScreen
            eyebrow={route.loadingEyebrow}
            text={route.loadingText}
          />
        ) : null
      }
    >
      {shouldGateRouteImages ? (
        <RouteImageReadyGate
          eyebrow={route.loadingEyebrow}
          text={route.loadingText}
        >
          {routeElement}
        </RouteImageReadyGate>
      ) : (
        routeElement
      )}
    </Suspense>
    <FloatingFeedbackEntry />
  </StrictMode>,
);