New sidebar and folder view (#263)

src-web/routes/__root.tsx

@@ -6,7 +6,7 @@ import { Provider as JotaiProvider } from 'jotai';
 import { domAnimation, LazyMotion, MotionConfig } from 'motion/react';
 import React, { Suspense } from 'react';
 import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+import { TouchBackend } from 'react-dnd-touch-backend';
 import { Dialogs } from '../components/Dialogs';
 import { GlobalHooks } from '../components/GlobalHooks';
 import RouteError from '../components/RouteError';
@@ -25,7 +25,7 @@ function RouteComponent() {
       <QueryClientProvider client={queryClient}>
         <LazyMotion features={domAnimation}>
           <MotionConfig transition={{ duration: 0.1 }}>
-            <DndProvider backend={HTML5Backend}>
+            <DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>
               <Suspense>
                 <GlobalHooks />
                 <Toasts />

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

@@ -1,19 +1,38 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { Workspace } from '../../../components/Workspace';
 
-interface WorkspaceSearchSchema {
-  request_id?: string | null;
+type WorkspaceSearchSchema = {
   environment_id?: string | null;
   cookie_jar_id?: string | null;
-}
+} & (
+  | {
+      request_id: string;
+    }
+  | {
+      folder_id: string;
+    }
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  | {}
+);
 
 export const Route = createFileRoute('/workspaces/$workspaceId/')({
   component: RouteComponent,
-  validateSearch: (search: Record<string, unknown>): WorkspaceSearchSchema => ({
-    request_id: search.request_id as string,
-    environment_id: search.environment_id as string,
-    cookie_jar_id: search.cookie_jar_id as string,
-  }),
+  validateSearch: (search: Record<string, unknown>): WorkspaceSearchSchema => {
+    const base: Pick<WorkspaceSearchSchema, 'environment_id' | 'cookie_jar_id'> = {
+      environment_id: search.environment_id as string,
+      cookie_jar_id: search.cookie_jar_id as string,
+    };
+
+    const requestId = search.request_id as string | undefined;
+    const folderId = search.folder_id as string | undefined;
+    if (requestId != null) {
+      return { ...base, request_id: requestId };
+    } else if (folderId) {
+      return { ...base, folder_id: folderId };
+    } else {
+      return base;
+    }
+  },
 });
 
 function RouteComponent() {