Hierarchical TOC + routing

frontend/src/App.tsx

@@ -2,16 +2,20 @@ import { useState } from "react";
 import Panel from "./components/Panel";
 
 import { useQueries } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
 import "./App.css";
 import ArticleSelector from "./components/ArticleSelector";
-import CelexSelector from "./components/CelexSelector";
 import TOC from "./components/TOC";
 import { getArticleIds, getToc } from "./lib/api";
 import { Language } from "./lib/types";
 
-function App() {
-  const [celexId, setCelexId] = useState("32024R1689");
-  const [selectedArticle, setSelectedArticle] = useState<number>(1);
+type Props = {
+  celexId: string;
+  articleId: number;
+};
+
+function App({ celexId, articleId }: Props) {
+  const navigate = useNavigate();
   const [numPanels, setNumPanels] = useState(1);
   const [selectedParagraphId, setSelectedParagraphId] = useState<string | null>(
     null
@@ -35,10 +39,10 @@ function App() {
   const error = results.find((result) => result.isError);
 
   if (isPending) {
-    return <div>Loading...</div>;
+    return <div className="panel">Loading...</div>;
   }
   if (error) {
-    return <div>Error: {error.error?.message}</div>;
+    return <div className="panel">Error: {error.error?.message}</div>;
   }
 
   const examples = [
@@ -56,9 +60,7 @@ function App() {
             id="examples"
             value={celexId}
             onChange={(e) => {
-              setSelectedArticle(1);
-              setSelectedParagraphId(null);
-              setCelexId(e.currentTarget.value);
+              navigate(`/${e.target.value}`);
             }}
           >
             {examples.map((example) => (
@@ -68,11 +70,11 @@ function App() {
             ))}
           </select>
         </div>
-        <CelexSelector defaultId={celexId} onSelected={setCelexId} />
+        {/* <CelexSelector defaultId={celexId} onSelected={setCelexId} /> */}
         <ArticleSelector
           articleIds={results[0].data!}
-          selectedId={selectedArticle}
-          onSelected={setSelectedArticle}
+          selectedId={articleId}
+          onSelected={(id) => navigate(`/${celexId}/articles/${id}`)}
         />
         <button onClick={() => setNumPanels((prev) => prev + 1)}>
           Add Panel
@@ -81,8 +83,8 @@ function App() {
       <div className="panel-container">
         <TOC
           toc={results[1].data!}
-          selectedArticleId={selectedArticle}
-          onArticleSelected={setSelectedArticle}
+          selectedArticleId={articleId}
+          onArticleSelected={(id) => navigate(`/${celexId}/articles/${id}`)}
         />
         {Array.from({ length: numPanels }, (_, index) => (
           <Panel
@@ -91,7 +93,7 @@ function App() {
             language={
               Object.values(Language)[index % Object.values(Language).length]
             }
-            articleId={selectedArticle}
+            articleId={articleId}
             selectedParagraphId={selectedParagraphId || undefined}
             onParagraphSelected={setSelectedParagraphId}
           />