Use zustand for state management

frontend/src/App.tsx

@@ -1,14 +1,17 @@
-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 TOC from "./components/TOC";
+
 import { getArticleIds, getToc } from "./lib/api";
 import { Language } from "./lib/types";
 
+import ArticleSelector from "./components/ArticleSelector";
+import Panel from "./components/Panel";
+import TOC from "./components/TOC";
+
+import useUIStore from "./store/uiStore";
+
+import "./App.css";
+
 type Props = {
   celexId: string;
   articleId: number;
@@ -16,10 +19,7 @@ type Props = {
 
 function App({ celexId, articleId }: Props) {
   const navigate = useNavigate();
-  const [numPanels, setNumPanels] = useState(1);
-  const [selectedParagraphId, setSelectedParagraphId] = useState<string | null>(
-    null
-  );
+  const { numPanels, addPanel } = useUIStore();
 
   const results = useQueries({
     queries: [
@@ -76,9 +76,7 @@ function App({ celexId, articleId }: Props) {
           selectedId={articleId}
           onSelected={(id) => navigate(`/${celexId}/articles/${id}`)}
         />
-        <button onClick={() => setNumPanels((prev) => prev + 1)}>
-          Add Panel
-        </button>
+        <button onClick={addPanel}>Add Panel</button>
       </div>
       <div className="panel-container">
         <TOC
@@ -94,8 +92,6 @@ function App({ celexId, articleId }: Props) {
               Object.values(Language)[index % Object.values(Language).length]
             }
             articleId={articleId}
-            selectedParagraphId={selectedParagraphId || undefined}
-            onParagraphSelected={setSelectedParagraphId}
           />
         ))}
       </div>