Working initial version

frontend/src/App.tsx

@@ -0,0 +1,91 @@
+import { useState } from "react";
+import Panel from "./components/Panel";
+
+import { useQuery } from "@tanstack/react-query";
+import "./App.css";
+import ArticleSelector from "./components/ArticleSelector";
+import CelexSelector from "./components/CelexSelector";
+import { getArticleIds } from "./lib/api";
+import { Language } from "./lib/types";
+
+function App() {
+  const [celexId, setCelexId] = useState("32024R1689");
+  const [selectedArticle, setSelectedArticle] = useState<number>(1);
+  const [numPanels, setNumPanels] = useState(1);
+  const [selectedParagraphId, setSelectedParagraphId] = useState<string | null>(
+    null
+  );
+
+  const {
+    data: articleIds,
+    isPending,
+    error,
+  } = useQuery({
+    queryKey: ["articleIds", celexId],
+    queryFn: () => getArticleIds(celexId),
+    enabled: !!celexId,
+  });
+
+  if (isPending) {
+    return <div>Loading...</div>;
+  }
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  const examples = [
+    { name: "GDPR", id: "32016R0679" },
+    { name: "AI Act", id: "32024R1689" },
+    { name: "Cyber Resilience Act", id: "32024R2847" },
+  ];
+
+  return (
+    <div className="App">
+      <div className="controls">
+        <div>
+          <label htmlFor="examples">Select example:</label>
+          <select
+            id="examples"
+            value={celexId}
+            onChange={(e) => {
+              setSelectedArticle(1);
+              setSelectedParagraphId(null);
+              setCelexId(e.currentTarget.value);
+            }}
+          >
+            {examples.map((example) => (
+              <option key={example.id} value={example.id}>
+                {example.name}
+              </option>
+            ))}
+          </select>
+        </div>
+        <CelexSelector defaultId={celexId} onSelected={setCelexId} />
+        <ArticleSelector
+          articleIds={articleIds}
+          selectedId={selectedArticle}
+          onSelected={setSelectedArticle}
+        />
+        <button onClick={() => setNumPanels((prev) => prev + 1)}>
+          Add Panel
+        </button>
+      </div>
+      <div className="panel-container">
+        {Array.from({ length: numPanels }, (_, index) => (
+          <Panel
+            key={index}
+            celexId={celexId}
+            language={
+              Object.values(Language)[index % Object.values(Language).length]
+            }
+            articleId={selectedArticle}
+            selectedParagraphId={selectedParagraphId || undefined}
+            onParagraphSelected={setSelectedParagraphId}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default App;