Improved article selector with titles and structure

frontend/src/App.tsx

@@ -1,6 +1,3 @@
-import { useQueries } from "@tanstack/react-query";
-
-import { getArticleIds, getToc } from "./lib/api";
 import { Language } from "./lib/types";
 
 import ArticleSelector from "./components/ArticleSelector/ArticleSelector";
@@ -12,45 +9,29 @@ import useUIStore from "./store/uiStore";
 
 import styles from "./App.module.css";
 import CelexSelector from "./components/CelexSelector/CelexSelector";
+import { useTOC } from "./hooks/toc";
 
 function App() {
   const { numPanels, addPanel } = useUIStore();
   const { celexId, articleId } = useNavState();
-
-  const results = useQueries({
-    queries: [
-      {
-        queryKey: ["articleIds", celexId],
-        queryFn: () => getArticleIds(celexId!),
-        enabled: !!celexId,
-      },
-      {
-        queryKey: ["toc", celexId],
-        queryFn: () => getToc(celexId!, Language.ENG),
-        enabled: !!celexId,
-      },
-    ],
-  });
-
-  const isPending = results.some((result) => result.isPending);
-  const error = results.find((result) => result.isError);
+  const { data: toc, isPending, error } = useTOC();
 
   if (isPending) {
     return <div>Loading...</div>;
   }
   if (error) {
-    return <div>Error: {error.error?.message}</div>;
+    return <div>Error: {error.message}</div>;
   }
 
   return (
     <div className={styles.App}>
       <div className={styles.controls}>
         <CelexSelector />
-        <ArticleSelector articleIds={results[0].data!} />
+        <ArticleSelector toc={toc} />
         <button onClick={addPanel}>Add Panel</button>
       </div>
       <div className={styles.panelContainer}>
-        <TOC toc={results[1].data!} />
+        <TOC toc={toc} />
         {Array.from({ length: numPanels }, (_, index) => (
           <Panel
             key={index}