Performance sweep (#147)

src-web/routes/__root.tsx

@@ -0,0 +1,91 @@
+import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createRootRoute, Outlet } from '@tanstack/react-router';
+import classNames from 'classnames';
+import { MotionConfig } from 'framer-motion';
+import { createStore, Provider as JotaiProvider } from 'jotai';
+import React, { Suspense } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { HelmetProvider } from 'react-helmet-async';
+import { DialogProvider, Dialogs } from '../components/DialogContext';
+import { GlobalHooks } from '../components/GlobalHooks';
+import { ToastProvider, Toasts } from '../components/ToastContext';
+import { useOsInfo } from '../hooks/useOsInfo';
+
+const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (err, query) => {
+      console.log('Query client error', { err, query });
+    },
+  }),
+  defaultOptions: {
+    queries: {
+      retry: false,
+      networkMode: 'always',
+      refetchOnWindowFocus: true,
+      refetchOnReconnect: false,
+      refetchOnMount: false, // Don't refetch when a hook mounts
+    },
+  },
+});
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const TanStackRouterDevtools =
+  process.env.NODE_ENV === 'production'
+    ? () => null // Render nothing in production
+    : React.lazy(() =>
+        import('@tanstack/router-devtools').then((res) => ({
+          default: res.TanStackRouterDevtools,
+        })),
+      );
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ReactQueryDevtools =
+  process.env.NODE_ENV === 'production'
+    ? () => null // Render nothing in production
+    : React.lazy(() =>
+        import('@tanstack/react-query-devtools').then((res) => ({
+          default: res.ReactQueryDevtools,
+        })),
+      );
+
+export const Route = createRootRoute({
+  component: RouteComponent,
+});
+
+export const jotaiStore = createStore();
+
+function RouteComponent() {
+  const osInfo = useOsInfo();
+  return (
+    <JotaiProvider store={jotaiStore}>
+      <QueryClientProvider client={queryClient}>
+        <MotionConfig transition={{ duration: 0.1 }}>
+          <HelmetProvider>
+            <DndProvider backend={HTML5Backend}>
+              <Suspense>
+                <DialogProvider>
+                  <ToastProvider>
+                    <GlobalHooks />
+                    <Toasts />
+                    <Dialogs />
+                    <div
+                      className={classNames(
+                        'w-full h-full',
+                        osInfo?.osType === 'linux' && 'border border-border-subtle',
+                      )}
+                    >
+                      <Outlet />
+                    </div>
+                  </ToastProvider>
+                </DialogProvider>
+              </Suspense>
+            </DndProvider>
+          </HelmetProvider>
+        </MotionConfig>
+        {/*<ReactQueryDevtools initialIsOpen />*/}
+        {/*<TanStackRouterDevtools initialIsOpen />*/}
+      </QueryClientProvider>
+    </JotaiProvider>
+  );
+}

src-web/routes/index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { RedirectToLatestWorkspace } from '../components/RedirectToLatestWorkspace'
+
+export const Route = createFileRoute('/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <RedirectToLatestWorkspace />
+}

src-web/routes/workspaces/$workspaceId/index.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { Workspace } from '../../../components/Workspace';
+
+interface WorkspaceSearchSchema {
+  cookieJarId?: string | null;
+  environmentId?: string | null;
+}
+
+export const Route = createFileRoute('/workspaces/$workspaceId/')({
+  component: RouteComponent,
+  validateSearch: (search: Record<string, unknown>): WorkspaceSearchSchema => ({
+    environmentId: search.environment_id as string,
+    cookieJarId: search.cookie_jar_id as string,
+  }),
+});
+
+function RouteComponent() {
+  return <Workspace />;
+}

src-web/routes/workspaces/$workspaceId/requests/$requestId.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { Workspace } from '../../../../components/Workspace';
+
+export const Route = createFileRoute('/workspaces/$workspaceId/requests/$requestId')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <Workspace />;
+}

src-web/routes/workspaces/index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { RedirectToLatestWorkspace } from '../../components/RedirectToLatestWorkspace'
+
+export const Route = createFileRoute('/workspaces/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <RedirectToLatestWorkspace />
+}

src-web/routes/workspaces/settings.tsx

@@ -0,0 +1,17 @@
+import { createFileRoute } from '@tanstack/react-router'
+import Settings, { SettingsTab } from '../../components/Settings/Settings'
+
+interface SettingsSearchSchema {
+  tab?: SettingsTab
+}
+
+export const Route = createFileRoute('/workspaces/settings')({
+  component: RouteComponent,
+  validateSearch: (search: Record<string, unknown>): SettingsSearchSchema => ({
+    tab: (search.tab ?? SettingsTab.General) as SettingsTab,
+  }),
+})
+
+function RouteComponent() {
+  return <Settings />
+}