fix: fix providers for better debugging (#141)

Author: kantord

src/App.tsx

@@ -4,24 +4,29 @@ import { usePromptsData } from "./hooks/usePromptsData";
 import { Sidebar } from "./components/Sidebar";
 import { useSse } from "./hooks/useSse";
 import Page from "./Page";
+import { useHref, useNavigate } from "react-router-dom";
+import { RouterProvider } from "@stacklok/ui-kit";
 
 function App() {
   const { data: prompts, isLoading } = usePromptsData();
+  const navigate = useNavigate();
   useSse();
 
   return (
-    <div className="flex w-screen h-screen">
-      <Sidebar loading={isLoading}>
-        <PromptList prompts={prompts ?? []} />
-      </Sidebar>
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <Header />
+    <RouterProvider navigate={navigate} useHref={useHref}>
+      <div className="flex w-screen h-screen">
+        <Sidebar loading={isLoading}>
+          <PromptList prompts={prompts ?? []} />
+        </Sidebar>
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <Header />
 
-        <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-3">
-          <Page />
+          <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-3">
+            <Page />
+          </div>
         </div>
       </div>
-    </div>
+    </RouterProvider>
   );
 }
 

src/main.tsx

@@ -3,13 +3,13 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import "@stacklok/ui-kit/style";
 import App from "./App.tsx";
-import { BrowserRouter } from "react-router-dom";
 import { SidebarProvider } from "./components/ui/sidebar.tsx";
 import ErrorBoundary from "./components/ErrorBoundary.tsx";
 import { Error } from "./components/Error.tsx";
 import { DarkModeProvider, Toaster } from "@stacklok/ui-kit";
 import { client } from "./api/generated/index.ts";
 import { QueryClientProvider } from "./components/react-query-provider.tsx";
+import { BrowserRouter } from "react-router-dom";
 
 // Initialize the API client
 client.setConfig({
@@ -21,12 +21,12 @@ createRoot(document.getElementById("root")!).render(
     <BrowserRouter>
       <DarkModeProvider>
         <SidebarProvider>
-          <ErrorBoundary fallback={<Error />}>
-            <QueryClientProvider>
+          <QueryClientProvider>
+            <ErrorBoundary fallback={<Error />}>
               <Toaster />
               <App />
-            </QueryClientProvider>
-          </ErrorBoundary>
+            </ErrorBoundary>
+          </QueryClientProvider>
         </SidebarProvider>
       </DarkModeProvider>
     </BrowserRouter>