llink/js/src/App.tsx

import { useEffect } from "react";
import { HashRouter, Routes, Route, useNavigate } from "react-router-dom";
import { TooltipProvider } from "@/components/ui/tooltip";
import { useAuthStore } from "@/stores/auth-store";
import { LoginPage } from "@/features/auth/login-page";
import { QueryClientProvider } from '@tanstack/react-query';
import SettingsPage from "@/features/settings-page";
import AudioVideoSettingsPage from "@/features/settings/audio-video-settings-page";
import NetworkSelector from "@/features/network-selector";
import NetworkRoot from "@/features/network-root";
import ParticleViewResolver from "@/features/particles/particle-view-resolver";
import Layout from "@/features/layout";
import NetworkSettingsPage from "@/features/network-settings";
import { Toaster } from "@/components/ui/sonner";
import { PusherProvider } from "@/lib/pusher-provider";
import { createQueryClient } from "@/lib/query-client";
import {
  RouteErrorBoundary,
  TopLevelErrorBoundary,
} from "@/components/app-error-boundary";

const queryClient = createQueryClient();

const App = () => {
  const status = useAuthStore((s) => s.status);
  const restoreSession = useAuthStore((s) => s.restoreSession);

  useEffect(() => {
    restoreSession();
  }, [restoreSession]);

  if (status === "idle" || status === "restoring") {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <p className="text-muted-foreground text-sm">Loading...</p>
      </div>
    );
  }

  if (status !== "authenticated") {
    return <LoginPage />;
  }

  return (
    <PusherProvider>
      <AuthenticatedApp />
    </PusherProvider>
  );
};

function AutoplayNavigationListener() {
  const navigate = useNavigate();

  useEffect(() => {
    return window.electronAutoplay.onNavigate((data) => {
      navigate(`/${data.networkId}/${data.streamId}`);
    });
  }, [navigate]);

  return null;
}

function AuthenticatedApp() {
  return (
    <HashRouter>
      <AutoplayNavigationListener />
      <RouteErrorBoundary>
        <Routes>
          <Route path="settings" element={<SettingsPage />} />
          <Route path="settings/audio-video" element={<AudioVideoSettingsPage />} />

          <Route path="/">
            <Route index element={<Layout><NetworkSelector /></Layout>} />
            <Route path=":networkId">
              <Route index element={<Layout><NetworkRoot /></Layout>} />
              <Route path="settings" element={<NetworkSettingsPage />} />
              <Route path="*" element={<ParticleViewResolver />} />
            </Route>
          </Route>
        </Routes>
      </RouteErrorBoundary>
    </HashRouter>
  );
}

const AppWithProviders = () => (
  <TopLevelErrorBoundary>
    <TooltipProvider>
      <QueryClientProvider client={queryClient}>
        <App />
        <Toaster />
      </QueryClientProvider>
    </TooltipProvider>
  </TopLevelErrorBoundary>
);

export default AppWithProviders;