youclonedl/frontend/src/App.jsx

import { BrowserRouter, Routes, Route, Navigate, useParams } from "react-router-dom";
import { AuthProvider, useAuth } from "./hooks/useAuth";
import Layout from "./components/Layout";
import Home from "./pages/Home";
import SearchResults from "./pages/SearchResults";
import ChannelPage from "./pages/Channel";
import DownloadsPage from "./pages/Downloads";
import DiscoveryPage from "./pages/Discovery";
import LoginPage from "./pages/Login";
import WatchPage from "./pages/Watch";

function WatchWrapper() {
  const { youtubeVideoId } = useParams();
  return <WatchPage key={youtubeVideoId} />;
}
import FollowingPage from "./pages/Following";
import LikedPage from "./pages/Liked";
import SettingsPage from "./pages/Settings";
import ContinueWatchingPage from "./pages/ContinueWatching";
import QueuePage from "./pages/Queue";
import HistoryPage from "./pages/History";
import StatsPage from "./pages/Stats";
import CollectionsPage from "./pages/Collections";

function RequireAuth({ children }) {
  const { user, loading } = useAuth();
  if (loading) return <div className="flex items-center justify-center h-screen text-zinc-500">Loading…</div>;
  if (!user) return <Navigate to="/login" replace />;
  return children;
}

export default function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/login" element={<LoginPage />} />
          <Route
            path="/"
            element={
              <RequireAuth>
                <Layout />
              </RequireAuth>
            }
          >
            <Route index element={<Home />} />
            <Route path="search" element={<SearchResults />} />
            <Route path="channels/:id" element={<ChannelPage />} />
            <Route path="downloads" element={<DownloadsPage />} />
            <Route path="following" element={<FollowingPage />} />
            <Route path="discovery" element={<DiscoveryPage />} />
            <Route path="liked" element={<LikedPage />} />
            <Route path="continue-watching" element={<ContinueWatchingPage />} />
            <Route path="queue" element={<QueuePage />} />
            <Route path="settings" element={<SettingsPage />} />
            <Route path="history" element={<HistoryPage />} />
            <Route path="stats" element={<StatsPage />} />
            <Route path="collections" element={<CollectionsPage />} />
            <Route path="watch/:youtubeVideoId" element={<WatchWrapper />} />
          </Route>
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  );
}