Better sidebar collapse, debuonce container uqeries, fix recent requests

src-web/components/GrpcConnectionSetupPane.tsx

@@ -1,7 +1,8 @@
 import useResizeObserver from '@react-hook/resize-observer';
 import classNames from 'classnames';
 import type { CSSProperties, FormEvent } from 'react';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { useDebouncedState } from '../hooks/useDebouncedState';
 import type { ReflectResponseService } from '../hooks/useGrpc';
 import { useGrpcConnections } from '../hooks/useGrpcConnections';
 import { useUpdateGrpcRequest } from '../hooks/useUpdateGrpcRequest';
@@ -57,7 +58,7 @@ export function GrpcConnectionSetupPane({
   const activeConnection = connections[0] ?? null;
   const isStreaming = activeConnection?.elapsed === 0;
 
-  const [paneSize, setPaneSize] = useState(99999);
+  const [paneSize, setPaneSize] = useDebouncedState(99999, 100);
   const urlContainerEl = useRef<HTMLDivElement>(null);
   useResizeObserver<HTMLDivElement>(urlContainerEl.current, (entry) => {
     setPaneSize(entry.contentRect.width);

src-web/components/RecentRequestsDropdown.tsx

@@ -7,8 +7,8 @@ import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId';
 import { useAppRoutes } from '../hooks/useAppRoutes';
 import { useGrpcRequests } from '../hooks/useGrpcRequests';
 import { useHotKey } from '../hooks/useHotKey';
-import { useRecentRequests } from '../hooks/useRecentRequests';
 import { useHttpRequests } from '../hooks/useHttpRequests';
+import { useRecentRequests } from '../hooks/useRecentRequests';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
@@ -77,10 +77,11 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
     if (recentRequestItems.length === 0) {
       return [
         {
+          key: 'no-recent-requests',
           label: 'No recent requests',
           disabled: true,
         },
-      ] as DropdownItem[];
+      ];
     }
 
     return recentRequestItems.slice(0, 20);

src-web/components/SidebarActions.tsx

@@ -40,17 +40,17 @@ export const SidebarActions = memo(function SidebarActions() {
             label: 'HTTP Request',
             onSelect: () => createHttpRequest.mutate({}),
           },
-          {
-            key: 'create-grpc-request',
-            label: 'GRPC Request',
-            onSelect: () => createGrpcRequest.mutate({}),
-          },
           {
             key: 'create-graphql-request',
-            label: 'GraphQL Request',
+            label: 'GraphQL Query',
             onSelect: () =>
               createHttpRequest.mutate({ bodyType: BODY_TYPE_GRAPHQL, method: 'POST' }),
           },
+          {
+            key: 'create-grpc-request',
+            label: 'GRPC Call',
+            onSelect: () => createGrpcRequest.mutate({}),
+          },
           {
             key: 'create-folder',
             label: 'Folder',

src-web/components/UrlBar.tsx

@@ -69,7 +69,7 @@ export const UrlBar = memo(function UrlBar({
             <RequestMethodDropdown
               method={method}
               onChange={onMethodChange}
-              className="mx-0.5 my-0.5"
+              className="!h-auto my-0.5 mr-0.5"
             />
           )
         }
@@ -80,7 +80,7 @@ export const UrlBar = memo(function UrlBar({
               iconSize="md"
               title="Send Request"
               type="submit"
-              className="w-8 mr-0.5 my-0.5"
+              className="w-8 !h-auto my-0.5 mr-0.5"
               icon={isLoading ? 'update' : submitIcon}
               spin={isLoading}
               hotkeyAction="http_request.send"

src-web/components/Workspace.tsx

@@ -71,7 +71,7 @@ export default function Workspace() {
         move: async (e: MouseEvent) => {
           e.preventDefault(); // Prevent text selection and things
           const newWidth = startWidth + (e.clientX - mouseStartX);
-          if (newWidth < 100) {
+          if (newWidth < 50) {
             await hide();
             resetWidth();
           } else {

src-web/components/core/SplitLayout.tsx

@@ -5,6 +5,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useLocalStorage } from 'react-use';
 import { useActiveRequestId } from '../../hooks/useActiveRequestId';
 import { useActiveWorkspaceId } from '../../hooks/useActiveWorkspaceId';
+import { useDebouncedState } from '../../hooks/useDebouncedState';
 import { clamp } from '../../lib/clamp';
 import { ResizeHandle } from '../ResizeHandle';
 import { HotKeyList } from './HotKeyList';
@@ -44,7 +45,7 @@ export function SplitLayout({
   minWidthPx = 10,
 }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const [vertical, setVertical] = useState<boolean>(false);
+  const [vertical, setVertical] = useDebouncedState<boolean>(false, 100);
   const [widthRaw, setWidth] = useLocalStorage<number>(`${name}_width::${useActiveWorkspaceId()}`);
   const [heightRaw, setHeight] = useLocalStorage<number>(
     `${name}_height::${useActiveWorkspaceId()}`,