export react-query from main

* add bottom padding to treeItem
* remove redundant tree scroll

apps/client/src/components/providers/tanstack-provider.tsx

@@ -1,18 +0,0 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import React from "react";
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
-      retry: false,
-    },
-  },
-});
-
-export function TanstackProvider({ children }: React.PropsWithChildren) {
-  return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  );
-}

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -3,7 +3,6 @@ import { useAtom } from "jotai";
 import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
 import {
   useGetRootSidebarPagesQuery,
-  useGetSidebarPagesQuery,
   useUpdatePageMutation,
 } from "@/features/page/queries/page-query.ts";
 import React, { useEffect, useRef } from "react";
@@ -32,8 +31,8 @@ import {
 } from "@/features/page/tree/utils/utils.ts";
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 import { getSidebarPages } from "@/features/page/services/page-service.ts";
-import { QueryClient } from "@tanstack/react-query";
 import { SidebarPagesParams } from "@/features/page/types/page.types.ts";
+import { queryClient } from "@/main.tsx";
 
 interface SpaceTreeProps {
   spaceId: string;
@@ -70,8 +69,7 @@ export default function SpaceTree({ spaceId }: SpaceTreeProps) {
 
   useEffect(() => {
     setTimeout(() => {
-      treeAPi?.select(pageId);
+      treeAPi?.select(pageId, { align: "auto" });
-      treeAPi?.scrollTo(pageId, "auto");
     }, 200);
   }, [treeAPi, pageId]);
 
@@ -89,7 +87,6 @@ export default function SpaceTree({ spaceId }: SpaceTreeProps) {
             disableMultiSelection={true}
             className={classes.tree}
             rowClassName={classes.row}
-            // padding={15}
             rowHeight={30}
             overscanCount={8}
             dndRootElement={rootElement.current}
@@ -103,11 +100,9 @@ export default function SpaceTree({ spaceId }: SpaceTreeProps) {
   );
 }
 
-const queryClient = new QueryClient();
 function Node({ node, style, dragHandle }: NodeRendererProps<any>) {
   const navigate = useNavigate();
   const updatePageMutation = useUpdatePageMutation();
-  //const use = useGetExpandPageTreeQuery()
   const [treeData, setTreeData] = useAtom(treeDataAtom);
 
   function updateTreeData(

apps/client/src/features/page/tree/styles/tree.module.css

@@ -98,3 +98,7 @@
 .arrow {
     display: flex;
 }
+
+[role="treeitem"] {
+    padding-bottom: 2px;
+}

apps/client/src/main.tsx

@@ -1,31 +1,39 @@
-import '@mantine/core/styles.css';
+import "@mantine/core/styles.css";
-import '@mantine/spotlight/styles.css';
+import "@mantine/spotlight/styles.css";
-import '@mantine/notifications/styles.css';
+import "@mantine/notifications/styles.css";
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import App from './App.tsx';
+import App from "./App.tsx";
-import { theme } from '@/theme';
+import { theme } from "@/theme";
-import { MantineProvider } from '@mantine/core';
+import { MantineProvider } from "@mantine/core";
-import { TanstackProvider } from '@/components/providers/tanstack-provider';
+import { BrowserRouter } from "react-router-dom";
-import { BrowserRouter } from 'react-router-dom';
+import { ModalsProvider } from "@mantine/modals";
-import { ModalsProvider } from '@mantine/modals';
+import { Notifications } from "@mantine/notifications";
-import { Notifications } from '@mantine/notifications';
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement,
+);
 
 root.render(
   <BrowserRouter>
     <MantineProvider theme={theme}>
       <ModalsProvider>
-        <TanstackProvider>
+        <QueryClientProvider client={queryClient}>
           <Notifications position="top-right" limit={3} />
           <App />
-        </TanstackProvider>
+        </QueryClientProvider>
       </ModalsProvider>
     </MantineProvider>
   </BrowserRouter>,
 );
-
-
-
-