New sidebar and folder view (#263)

src-web/components/Workspace.tsx

@@ -12,6 +12,8 @@ import {
   activeEnvironmentAtom,
   useSubscribeActiveEnvironmentId,
 } from '../hooks/useActiveEnvironment';
+import { activeFolderAtom } from '../hooks/useActiveFolder';
+import { useSubscribeActiveFolderId } from '../hooks/useActiveFolderId';
 import { activeRequestAtom } from '../hooks/useActiveRequest';
 import { useSubscribeActiveRequestId } from '../hooks/useActiveRequestId';
 import { activeWorkspaceAtom } from '../hooks/useActiveWorkspace';
@@ -26,7 +28,7 @@ import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { useSidebarWidth } from '../hooks/useSidebarWidth';
 import { useSyncWorkspaceRequestTitle } from '../hooks/useSyncWorkspaceRequestTitle';
 import { useToggleCommandPalette } from '../hooks/useToggleCommandPalette';
-import { duplicateRequestAndNavigate } from '../lib/duplicateRequestAndNavigate';
+import { duplicateRequestOrFolderAndNavigate } from '../lib/duplicateRequestOrFolderAndNavigate';
 import { importData } from '../lib/importData';
 import { jotaiStore } from '../lib/jotai';
 import { Banner } from './core/Banner';
@@ -36,13 +38,14 @@ import { FeedbackLink } from './core/Link';
 import { HStack } from './core/Stacks';
 import { CreateDropdown } from './CreateDropdown';
 import { ErrorBoundary } from './ErrorBoundary';
+import { FolderLayout } from './FolderLayout';
 import { GrpcConnectionLayout } from './GrpcConnectionLayout';
 import { HeaderSize } from './HeaderSize';
 import { HttpRequestLayout } from './HttpRequestLayout';
+import NewSidebar from './NewSidebar';
 import { Overlay } from './Overlay';
 import { ResizeHandle } from './ResizeHandle';
-import { Sidebar } from './sidebar/Sidebar';
-import { SidebarActions } from './sidebar/SidebarActions';
+import { SidebarActions } from './SidebarActions';
 import { WebsocketRequestLayout } from './WebsocketRequestLayout';
 import { WorkspaceHeader } from './WorkspaceHeader';
 
@@ -161,7 +164,7 @@ export function Workspace() {
               <SidebarActions />
             </HeaderSize>
             <ErrorBoundary name="Sidebar (Floating)">
-              <Sidebar />
+              <NewSidebar />
             </ErrorBoundary>
           </m.div>
         </Overlay>
@@ -169,7 +172,7 @@ export function Workspace() {
         <>
           <div style={side} className={classNames('x-theme-sidebar', 'overflow-hidden bg-surface')}>
             <ErrorBoundary name="Sidebar">
-              <Sidebar className="border-r border-border-subtle" />
+              <NewSidebar className="border-r border-border-subtle" />
             </ErrorBoundary>
           </div>
           <ResizeHandle
@@ -193,7 +196,7 @@ export function Workspace() {
             style={environmentBgStyle}
             className="absolute inset-0 opacity-5"
           />
-          <div // Add subtle border bottom
+          <div // Add a subtle border bottom
             style={environmentBgStyle}
             className="absolute left-0 right-0 bottom-0 h-[0.5px] opacity-20"
           />
@@ -209,6 +212,7 @@ export function Workspace() {
 
 function WorkspaceBody() {
   const activeRequest = useAtomValue(activeRequestAtom);
+  const activeFolder = useAtomValue(activeFolderAtom);
   const activeWorkspace = useAtomValue(activeWorkspaceAtom);
 
   if (activeWorkspace == null) {
@@ -228,39 +232,40 @@ function WorkspaceBody() {
     );
   }
 
-  if (activeRequest == null) {
-    return (
-      <HotKeyList
-        hotkeys={['http_request.create', 'sidebar.focus', 'settings.show']}
-        bottomSlot={
-          <HStack space={1} justifyContent="center" className="mt-3">
-            <Button variant="border" size="sm" onClick={() => importData.mutate()}>
-              Import
-            </Button>
-            <CreateDropdown hideFolder>
-              <Button variant="border" forDropdown size="sm">
-                New Request
-              </Button>
-            </CreateDropdown>
-          </HStack>
-        }
-      />
-    );
+  if (activeRequest?.model === 'grpc_request') {
+    return <GrpcConnectionLayout style={body} />;
+  } else if (activeRequest?.model === 'websocket_request') {
+    return <WebsocketRequestLayout style={body} activeRequest={activeRequest} />;
+  } else if (activeRequest?.model === 'http_request') {
+    return <HttpRequestLayout activeRequest={activeRequest} style={body} />;
+  } else if (activeFolder != null) {
+    return <FolderLayout folder={activeFolder} style={body} />;
   }
 
-  if (activeRequest.model === 'grpc_request') {
-    return <GrpcConnectionLayout style={body} />;
-  } else if (activeRequest.model === 'websocket_request') {
-    return <WebsocketRequestLayout style={body} activeRequest={activeRequest} />;
-  } else {
-    return <HttpRequestLayout activeRequest={activeRequest} style={body} />;
-  }
+  return (
+    <HotKeyList
+      hotkeys={['model.create', 'sidebar.focus', 'settings.show']}
+      bottomSlot={
+        <HStack space={1} justifyContent="center" className="mt-3">
+          <Button variant="border" size="sm" onClick={() => importData.mutate()}>
+            Import
+          </Button>
+          <CreateDropdown hideFolder>
+            <Button variant="border" forDropdown size="sm">
+              New Request
+            </Button>
+          </CreateDropdown>
+        </HStack>
+      }
+    />
+  );
 }
 
 function useGlobalWorkspaceHooks() {
   useEnsureActiveCookieJar();
 
   useSubscribeActiveRequestId();
+  useSubscribeActiveFolderId();
   useSubscribeActiveEnvironmentId();
   useSubscribeActiveCookieJarId();
 
@@ -274,7 +279,7 @@ function useGlobalWorkspaceHooks() {
   const toggleCommandPalette = useToggleCommandPalette();
   useHotKey('command_palette.toggle', toggleCommandPalette);
 
-  useHotKey('http_request.duplicate', () =>
-    duplicateRequestAndNavigate(jotaiStore.get(activeRequestAtom)),
+  useHotKey('model.duplicate', () =>
+    duplicateRequestOrFolderAndNavigate(jotaiStore.get(activeRequestAtom)),
   );
 }