Websocket Support (#159)

src-web/components/sidebar/Sidebar.tsx

@@ -0,0 +1,389 @@
+import type {
+  Folder,
+  GrpcRequest,
+  HttpRequest,
+  WebsocketRequest,
+  Workspace,
+} from '@yaakapp-internal/models';
+import classNames from 'classnames';
+import { useAtom, useAtomValue } from 'jotai';
+import React, { useCallback, useRef, useState } from 'react';
+import { useKey, useKeyPressEvent } from 'react-use';
+import { upsertWebsocketRequest } from '../../commands/upsertWebsocketRequest';
+import { getActiveRequest } from '../../hooks/useActiveRequest';
+import { useActiveWorkspace } from '../../hooks/useActiveWorkspace';
+import { useCreateDropdownItems } from '../../hooks/useCreateDropdownItems';
+import { useDeleteAnyRequest } from '../../hooks/useDeleteAnyRequest';
+import { useGrpcConnections } from '../../hooks/useGrpcConnections';
+import { useHotKey } from '../../hooks/useHotKey';
+import { useHttpResponses } from '../../hooks/useHttpResponses';
+import { useSidebarHidden } from '../../hooks/useSidebarHidden';
+import { getSidebarCollapsedMap } from '../../hooks/useSidebarItemCollapsed';
+import { useUpdateAnyFolder } from '../../hooks/useUpdateAnyFolder';
+import { useUpdateAnyGrpcRequest } from '../../hooks/useUpdateAnyGrpcRequest';
+import { useUpdateAnyHttpRequest } from '../../hooks/useUpdateAnyHttpRequest';
+import { getWebsocketRequest } from '../../hooks/useWebsocketRequests';
+import { router } from '../../lib/router';
+import { setWorkspaceSearchParams } from '../../lib/setWorkspaceSearchParams';
+import { ContextMenu } from '../core/Dropdown';
+import { sidebarSelectedIdAtom, sidebarTreeAtom } from './SidebarAtoms';
+import type { SidebarItemProps } from './SidebarItem';
+import { SidebarItems } from './SidebarItems';
+
+interface Props {
+  className?: string;
+}
+
+export type SidebarModel = Folder | GrpcRequest | HttpRequest | WebsocketRequest | Workspace;
+
+export interface SidebarTreeNode {
+  id: string;
+  name: string;
+  model: SidebarModel['model'];
+  sortPriority?: number;
+  workspaceId?: string;
+  folderId?: string | null;
+  children: SidebarTreeNode[];
+  depth: number;
+}
+
+export function Sidebar({ className }: Props) {
+  const [hidden, setHidden] = useSidebarHidden();
+  const sidebarRef = useRef<HTMLElement>(null);
+  const activeWorkspace = useActiveWorkspace();
+  const httpResponses = useHttpResponses();
+  const grpcConnections = useGrpcConnections();
+  const [hasFocus, setHasFocus] = useState<boolean>(false);
+  const [selectedId, setSelectedId] = useAtom(sidebarSelectedIdAtom);
+  const [selectedTree, setSelectedTree] = useState<SidebarTreeNode | null>(null);
+  const { mutateAsync: updateAnyHttpRequest } = useUpdateAnyHttpRequest();
+  const { mutateAsync: updateAnyGrpcRequest } = useUpdateAnyGrpcRequest();
+  const { mutateAsync: updateAnyFolder } = useUpdateAnyFolder();
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [hoveredTree, setHoveredTree] = useState<SidebarTreeNode | null>(null);
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  const { tree, treeParentMap, selectableRequests } = useAtomValue(sidebarTreeAtom);
+
+  const focusActiveRequest = useCallback(
+    (
+      args: {
+        forced?: {
+          id: string;
+          tree: SidebarTreeNode;
+        };
+        noFocusSidebar?: boolean;
+      } = {},
+    ) => {
+      const activeRequest = getActiveRequest();
+      const { forced, noFocusSidebar } = args;
+      const tree = forced?.tree ?? treeParentMap[activeRequest?.id ?? 'n/a'] ?? null;
+      const children = tree?.children ?? [];
+      const id = forced?.id ?? children.find((m) => m.id === activeRequest?.id)?.id ?? null;
+
+      setHasFocus(true);
+      setSelectedId(id);
+      setSelectedTree(tree);
+
+      if (id == null) {
+        return;
+      }
+      if (!noFocusSidebar) {
+        sidebarRef.current?.focus();
+      }
+    },
+    [setHasFocus, setSelectedId, treeParentMap],
+  );
+
+  const handleSelect = useCallback(
+    async (id: string) => {
+      const tree = treeParentMap[id ?? 'n/a'] ?? null;
+      const children = tree?.children ?? [];
+      const node = children.find((m) => m.id === id) ?? null;
+      if (node == null || tree == null || node.model === 'workspace') {
+        return;
+      }
+
+      // NOTE: I'm not sure why, but TS thinks workspaceId is (string | undefined) here
+      if (node.model !== 'folder' && node.workspaceId) {
+        const workspaceId = node.workspaceId;
+        await router.navigate({
+          to: '/workspaces/$workspaceId',
+          params: { workspaceId },
+          search: (prev) => ({ ...prev, request_id: node.id }),
+        });
+
+        setHasFocus(true);
+        setSelectedId(id);
+        setSelectedTree(tree);
+      }
+    },
+    [treeParentMap, setSelectedId],
+  );
+
+  const handleClearSelected = useCallback(() => {
+    setSelectedId(null);
+    setSelectedTree(null);
+  }, [setSelectedId]);
+
+  const handleFocus = useCallback(() => {
+    if (hasFocus) return;
+    focusActiveRequest({ noFocusSidebar: true });
+  }, [focusActiveRequest, hasFocus]);
+
+  const handleBlur = useCallback(() => setHasFocus(false), [setHasFocus]);
+  const deleteRequest = useDeleteAnyRequest();
+
+  useHotKey(
+    'http_request.delete',
+    async () => {
+      // Delete only works if a request is focused
+      if (selectedId == null) return;
+      deleteRequest.mutate(selectedId);
+    },
+    { enable: hasFocus },
+  );
+
+  useHotKey('sidebar.focus', async () => {
+    // Hide the sidebar if it's already focused
+    if (!hidden && hasFocus) {
+      await setHidden(true);
+      return;
+    }
+
+    // Show the sidebar if it's hidden
+    if (hidden) {
+      await setHidden(false);
+    }
+
+    // Select 0th index on focus if none selected
+    focusActiveRequest(
+      selectedTree != null && selectedId != null
+        ? { forced: { id: selectedId, tree: selectedTree } }
+        : undefined,
+    );
+  });
+
+  useKeyPressEvent('Enter', async (e) => {
+    if (!hasFocus) return;
+    const selected = selectableRequests.find((r) => r.id === selectedId);
+    if (!selected || activeWorkspace == null) {
+      return;
+    }
+
+    e.preventDefault();
+    setWorkspaceSearchParams({ request_id: selected.id });
+  });
+
+  useKey(
+    'ArrowUp',
+    (e) => {
+      if (!hasFocus) return;
+      e.preventDefault();
+      const i = selectableRequests.findIndex((r) => r.id === selectedId);
+      const newSelectable = selectableRequests[i - 1];
+      if (newSelectable == null) {
+        return;
+      }
+
+      setSelectedId(newSelectable.id);
+      setSelectedTree(newSelectable.tree);
+    },
+    undefined,
+    [hasFocus, selectableRequests, selectedId, setSelectedId, setSelectedTree],
+  );
+
+  useKey(
+    'ArrowDown',
+    (e) => {
+      if (!hasFocus) return;
+      e.preventDefault();
+      const i = selectableRequests.findIndex((r) => r.id === selectedId);
+      const newSelectable = selectableRequests[i + 1];
+      if (newSelectable == null) {
+        return;
+      }
+
+      setSelectedId(newSelectable.id);
+      setSelectedTree(newSelectable.tree);
+    },
+    undefined,
+    [hasFocus, selectableRequests, selectedId, setSelectedId, setSelectedTree],
+  );
+
+  const handleMove = useCallback<SidebarItemProps['onMove']>(
+    async (id, side) => {
+      let hoveredTree = treeParentMap[id] ?? null;
+      const dragIndex = hoveredTree?.children.findIndex((n) => n.id === id) ?? -99;
+      const hoveredItem = hoveredTree?.children[dragIndex] ?? null;
+      let hoveredIndex = dragIndex + (side === 'above' ? 0 : 1);
+
+      const isHoveredItemCollapsed =
+        hoveredItem != null ? getSidebarCollapsedMap()[hoveredItem.id] : false;
+      if (hoveredItem?.model === 'folder' && side === 'below' && !isHoveredItemCollapsed) {
+        // Move into the folder if it's open and we're moving below it
+        hoveredTree = hoveredTree?.children.find((n) => n.id === id) ?? null;
+        hoveredIndex = 0;
+      }
+
+      setHoveredTree(hoveredTree);
+      setHoveredIndex(hoveredIndex);
+    },
+    [treeParentMap],
+  );
+
+  const handleDragStart = useCallback<SidebarItemProps['onDragStart']>((id: string) => {
+    setDraggingId(id);
+  }, []);
+
+  const handleEnd = useCallback<SidebarItemProps['onEnd']>(
+    async (itemId) => {
+      setHoveredTree(null);
+      handleClearSelected();
+
+      if (hoveredTree == null || hoveredIndex == null) {
+        return;
+      }
+
+      // Block dragging folder into itself
+      if (hoveredTree.id === itemId) {
+        return;
+      }
+
+      const parentTree = treeParentMap[itemId] ?? null;
+      const index = parentTree?.children.findIndex((n) => n.id === itemId) ?? -1;
+      const child = parentTree?.children[index ?? -1];
+      if (child == null || parentTree == null) return;
+
+      const movedToDifferentTree = hoveredTree.id !== parentTree.id;
+      const movedUpInSameTree = !movedToDifferentTree && hoveredIndex < index;
+
+      const newChildren = hoveredTree.children.filter((c) => c.id !== itemId);
+      if (movedToDifferentTree || movedUpInSameTree) {
+        // Moving up or into a new tree is simply inserting before the hovered item
+        newChildren.splice(hoveredIndex, 0, child);
+      } else {
+        // Moving down has to account for the fact that the original item will be removed
+        newChildren.splice(hoveredIndex - 1, 0, child);
+      }
+
+      const insertedIndex = newChildren.findIndex((c) => c.id === child.id);
+      const prev = newChildren[insertedIndex - 1];
+      const next = newChildren[insertedIndex + 1];
+      const beforePriority = prev?.sortPriority ?? 0;
+      const afterPriority = next?.sortPriority ?? 0;
+
+      const folderId = hoveredTree.model === 'folder' ? hoveredTree.id : null;
+      const shouldUpdateAll = afterPriority - beforePriority < 1;
+
+      if (shouldUpdateAll) {
+        await Promise.all(
+          newChildren.map((child, i) => {
+            const sortPriority = i * 1000;
+            if (child.model === 'folder') {
+              const updateFolder = (f: Folder) => ({ ...f, sortPriority, folderId });
+              return updateAnyFolder({ id: child.id, update: updateFolder });
+            } else if (child.model === 'grpc_request') {
+              const updateRequest = (r: GrpcRequest) => ({ ...r, sortPriority, folderId });
+              return updateAnyGrpcRequest({ id: child.id, update: updateRequest });
+            } else if (child.model === 'http_request') {
+              const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId });
+              return updateAnyHttpRequest({ id: child.id, update: updateRequest });
+            } else if (child.model === 'websocket_request') {
+              const request = getWebsocketRequest(child.id);
+              return upsertWebsocketRequest.mutateAsync({ ...request, sortPriority, folderId });
+            } else {
+              throw new Error('Invalid model to update: ' + child.model);
+            }
+          }),
+        );
+      } else {
+        const sortPriority = afterPriority - (afterPriority - beforePriority) / 2;
+        if (child.model === 'folder') {
+          const updateFolder = (f: Folder) => ({ ...f, sortPriority, folderId });
+          await updateAnyFolder({ id: child.id, update: updateFolder });
+        } else if (child.model === 'grpc_request') {
+          const updateRequest = (r: GrpcRequest) => ({ ...r, sortPriority, folderId });
+          await updateAnyGrpcRequest({ id: child.id, update: updateRequest });
+        } else if (child.model === 'http_request') {
+          const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId });
+          await updateAnyHttpRequest({ id: child.id, update: updateRequest });
+        } else if (child.model === 'websocket_request') {
+          const request = getWebsocketRequest(child.id);
+          return upsertWebsocketRequest.mutateAsync({ ...request, sortPriority, folderId });
+        } else {
+          throw new Error('Invalid model to update: ' + child.model);
+        }
+      }
+      setDraggingId(null);
+    },
+    [
+      handleClearSelected,
+      hoveredTree,
+      hoveredIndex,
+      treeParentMap,
+      updateAnyFolder,
+      updateAnyGrpcRequest,
+      updateAnyHttpRequest,
+    ],
+  );
+
+  const [showMainContextMenu, setShowMainContextMenu] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const handleMainContextMenu = useCallback((e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setShowMainContextMenu({ x: e.clientX, y: e.clientY });
+  }, []);
+
+  const mainContextMenuItems = useCreateDropdownItems({ folderId: null });
+
+  // Not ready to render yet
+  if (tree == null) {
+    return null;
+  }
+
+  return (
+    <aside
+      aria-hidden={hidden ?? undefined}
+      ref={sidebarRef}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      tabIndex={hidden ? -1 : 0}
+      onContextMenu={handleMainContextMenu}
+      data-focused={hasFocus}
+      className={classNames(
+        className,
+        // Style item selection color here, because it's very hard to do in an efficient
+        // way in the item itself (selection ID makes it hard)
+        hasFocus && '[&_[data-selected=true]]:bg-surface-active',
+        'h-full grid grid-rows-[minmax(0,1fr)_auto]',
+      )}
+    >
+      <div className="pb-3 overflow-x-visible overflow-y-scroll pt-2">
+        <ContextMenu
+          triggerPosition={showMainContextMenu}
+          items={mainContextMenuItems}
+          onClose={() => setShowMainContextMenu(null)}
+        />
+        <SidebarItems
+          treeParentMap={treeParentMap}
+          selectedTree={selectedTree}
+          httpResponses={httpResponses}
+          grpcConnections={grpcConnections}
+          tree={tree}
+          draggingId={draggingId}
+          onSelect={handleSelect}
+          hoveredIndex={hoveredIndex}
+          hoveredTree={hoveredTree}
+          handleMove={handleMove}
+          handleEnd={handleEnd}
+          handleDragStart={handleDragStart}
+        />
+      </div>
+    </aside>
+  );
+}

src-web/components/sidebar/SidebarActions.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import { useFloatingSidebarHidden } from '../../hooks/useFloatingSidebarHidden';
+import { useShouldFloatSidebar } from '../../hooks/useShouldFloatSidebar';
+import { useSidebarHidden } from '../../hooks/useSidebarHidden';
+import { trackEvent } from '../../lib/analytics';
+import { IconButton } from '../core/IconButton';
+import { HStack } from '../core/Stacks';
+import { CreateDropdown } from '../CreateDropdown';
+
+export function SidebarActions() {
+  const floating = useShouldFloatSidebar();
+  const [normalHidden, setNormalHidden] = useSidebarHidden();
+  const [floatingHidden, setFloatingHidden] = useFloatingSidebarHidden();
+
+  const hidden = floating ? floatingHidden : normalHidden;
+  const setHidden = useMemo(
+    () => (floating ? setFloatingHidden : setNormalHidden),
+    [floating, setFloatingHidden, setNormalHidden],
+  );
+
+  return (
+    <HStack className="h-full">
+      <IconButton
+        onClick={async () => {
+          trackEvent('sidebar', 'toggle');
+
+          // NOTE: We're not using the (h) => !h pattern here because the data
+          //  might be different if another window changed it (out of sync)
+          await setHidden(!hidden);
+        }}
+        className="pointer-events-auto"
+        size="sm"
+        title="Show sidebar"
+        icon={hidden ? 'left_panel_hidden' : 'left_panel_visible'}
+      />
+      <CreateDropdown hotKeyAction="http_request.create">
+        <IconButton size="sm" icon="plus_circle" title="Add Resource" />
+      </CreateDropdown>
+    </HStack>
+  );
+}

src-web/components/sidebar/SidebarAtoms.ts

@@ -0,0 +1,118 @@
+import type { Folder, GrpcRequest, HttpRequest, WebsocketRequest } from '@yaakapp-internal/models';
+
+// This is an atom so we can use it in the child items to avoid re-rendering the entire list
+import { atom } from 'jotai';
+import { activeWorkspaceAtom } from '../../hooks/useActiveWorkspace';
+import { foldersAtom } from '../../hooks/useFolders';
+import { requestsAtom } from '../../hooks/useRequests';
+import { deepEqualAtom } from '../../lib/atoms';
+import { fallbackRequestName } from '../../lib/fallbackRequestName';
+import type { SidebarTreeNode } from './Sidebar';
+
+export const sidebarSelectedIdAtom = atom<string | null>(null);
+
+const allPotentialChildrenAtom = atom((get) => {
+  const requests = get(requestsAtom);
+  const folders = get(foldersAtom);
+  return [...requests, ...folders].map((v) => ({
+    id: v.id,
+    model: v.model,
+    folderId: v.folderId,
+    name: fallbackRequestName(v),
+    workspaceId: v.workspaceId,
+    sortPriority: v.sortPriority,
+  }));
+});
+
+const memoAllPotentialChildrenAtom = deepEqualAtom(allPotentialChildrenAtom);
+
+export const sidebarTreeAtom = atom<{
+  tree: SidebarTreeNode | null;
+  treeParentMap: Record<string, SidebarTreeNode>;
+  selectableRequests: {
+    id: string;
+    index: number;
+    tree: SidebarTreeNode;
+  }[];
+}>((get) => {
+  const allModels = get(memoAllPotentialChildrenAtom);
+  const activeWorkspace = get(activeWorkspaceAtom);
+
+  const childrenMap: Record<string, typeof allModels> = {};
+  for (const item of allModels) {
+    if ('folderId' in item && item.folderId == null) {
+      childrenMap[item.workspaceId] = childrenMap[item.workspaceId] ?? [];
+      childrenMap[item.workspaceId]!.push(item);
+    } else if ('folderId' in item && item.folderId != null) {
+      childrenMap[item.folderId] = childrenMap[item.folderId] ?? [];
+      childrenMap[item.folderId]!.push(item);
+    }
+  }
+
+  const treeParentMap: Record<string, SidebarTreeNode> = {};
+  const selectableRequests: {
+    id: string;
+    index: number;
+    tree: SidebarTreeNode;
+  }[] = [];
+
+  if (activeWorkspace == null) {
+    return { tree: null, treeParentMap, selectableRequests };
+  }
+
+  const selectedRequest: HttpRequest | GrpcRequest | WebsocketRequest | null = null;
+  let selectableRequestIndex = 0;
+
+  // Put requests and folders into a tree structure
+  const next = (node: SidebarTreeNode): SidebarTreeNode => {
+    const childItems = childrenMap[node.id] ?? [];
+
+    // Recurse to children
+    const depth = node.depth + 1;
+    childItems.sort((a, b) => a.sortPriority - b.sortPriority);
+    for (const childItem of childItems) {
+      treeParentMap[childItem.id] = node;
+      // Add to children
+      node.children.push(next(itemFromModel(childItem, depth)));
+      // Add to selectable requests
+      if (childItem.model !== 'folder') {
+        selectableRequests.push({
+          id: childItem.id,
+          index: selectableRequestIndex++,
+          tree: node,
+        });
+      }
+    }
+
+    return node;
+  };
+
+  const tree = next({
+    id: activeWorkspace.id,
+    name: activeWorkspace.name,
+    model: activeWorkspace.model,
+    children: [],
+    depth: 0,
+  });
+
+  return { tree, treeParentMap, selectableRequests, selectedRequest };
+});
+
+function itemFromModel(
+  item: Pick<
+    Folder | HttpRequest | GrpcRequest | WebsocketRequest,
+    'folderId' | 'model' | 'workspaceId' | 'id' | 'name' | 'sortPriority'
+  >,
+  depth = 0,
+): SidebarTreeNode {
+  return {
+    id: item.id,
+    name: item.name,
+    model: item.model,
+    sortPriority: 'sortPriority' in item ? item.sortPriority : -1,
+    workspaceId: item.workspaceId,
+    folderId: item.folderId,
+    depth,
+    children: [],
+  };
+}

src-web/components/sidebar/SidebarItem.tsx

@@ -0,0 +1,303 @@
+import type { AnyModel, GrpcConnection, HttpResponse } from '@yaakapp-internal/models';
+import classNames from 'classnames';
+import { atom, useAtomValue } from 'jotai';
+import type { ReactElement } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { XYCoord } from 'react-dnd';
+import { useDrag, useDrop } from 'react-dnd';
+import { upsertWebsocketRequest } from '../../commands/upsertWebsocketRequest';
+import { activeRequestAtom } from '../../hooks/useActiveRequest';
+import { foldersAtom } from '../../hooks/useFolders';
+import { requestsAtom } from '../../hooks/useRequests';
+import { useScrollIntoView } from '../../hooks/useScrollIntoView';
+import { useSidebarItemCollapsed } from '../../hooks/useSidebarItemCollapsed';
+import { useUpdateAnyGrpcRequest } from '../../hooks/useUpdateAnyGrpcRequest';
+import { useUpdateAnyHttpRequest } from '../../hooks/useUpdateAnyHttpRequest';
+import { getWebsocketRequest } from '../../hooks/useWebsocketRequests';
+import { jotaiStore } from '../../lib/jotai';
+import { HttpMethodTag } from '../core/HttpMethodTag';
+import { Icon } from '../core/Icon';
+import { StatusTag } from '../core/StatusTag';
+import type { SidebarTreeNode } from './Sidebar';
+import { sidebarSelectedIdAtom } from './SidebarAtoms';
+import { SidebarItemContextMenu } from './SidebarItemContextMenu';
+import type { SidebarItemsProps } from './SidebarItems';
+
+enum ItemTypes {
+  REQUEST = 'request',
+}
+
+export type SidebarItemProps = {
+  className?: string;
+  itemId: string;
+  itemName: string;
+  itemModel: AnyModel['model'];
+  onMove: (id: string, side: 'above' | 'below') => void;
+  onEnd: (id: string) => void;
+  onDragStart: (id: string) => void;
+  children: ReactElement<typeof SidebarItem> | null;
+  child: SidebarTreeNode;
+  latestHttpResponse: HttpResponse | null;
+  latestGrpcConnection: GrpcConnection | null;
+} & Pick<SidebarItemsProps, 'onSelect'>;
+
+type DragItem = {
+  id: string;
+  itemName: string;
+};
+
+export const SidebarItem = memo(function SidebarItem({
+  itemName,
+  itemId,
+  itemModel,
+  child,
+  onMove,
+  onEnd,
+  onDragStart,
+  onSelect,
+  className,
+  latestHttpResponse,
+  latestGrpcConnection,
+  children,
+}: SidebarItemProps) {
+  const ref = useRef<HTMLLIElement>(null);
+  const [collapsed, toggleCollapsed] = useSidebarItemCollapsed(itemId);
+
+  const [, connectDrop] = useDrop<DragItem, void>(
+    {
+      accept: ItemTypes.REQUEST,
+      hover: (_, monitor) => {
+        if (!ref.current) return;
+        const hoverBoundingRect = ref.current?.getBoundingClientRect();
+        const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+        const clientOffset = monitor.getClientOffset();
+        const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
+        onMove(itemId, hoverClientY < hoverMiddleY ? 'above' : 'below');
+      },
+    },
+    [onMove],
+  );
+
+  const [, connectDrag] = useDrag<
+    DragItem,
+    unknown,
+    {
+      isDragging: boolean;
+    }
+  >(
+    () => ({
+      type: ItemTypes.REQUEST,
+      item: () => {
+        // Cancel drag when editing
+        if (editing) return null;
+        onDragStart(itemId);
+        return { id: itemId, itemName };
+      },
+      collect: (m) => ({ isDragging: m.isDragging() }),
+      options: { dropEffect: 'move' },
+      end: () => onEnd(itemId),
+    }),
+    [onEnd],
+  );
+
+  connectDrag(connectDrop(ref));
+
+  const updateHttpRequest = useUpdateAnyHttpRequest();
+  const updateGrpcRequest = useUpdateAnyGrpcRequest();
+  const [editing, setEditing] = useState<boolean>(false);
+
+  const [selected, setSelected] = useState<boolean>(
+    jotaiStore.get(sidebarSelectedIdAtom) == itemId,
+  );
+  useEffect(() => {
+    return jotaiStore.sub(sidebarSelectedIdAtom, () => {
+      const value = jotaiStore.get(sidebarSelectedIdAtom);
+      setSelected(value === itemId);
+    });
+  }, [itemId]);
+
+  const [active, setActive] = useState<boolean>(jotaiStore.get(activeRequestAtom)?.id === itemId);
+  useEffect(
+    () =>
+      jotaiStore.sub(activeRequestAtom, () =>
+        setActive(jotaiStore.get(activeRequestAtom)?.id === itemId),
+      ),
+    [itemId],
+  );
+
+  useScrollIntoView(ref.current, active);
+
+  const handleSubmitNameEdit = useCallback(
+    async (el: HTMLInputElement) => {
+      if (itemModel === 'http_request') {
+        await updateHttpRequest.mutateAsync({
+          id: itemId,
+          update: (r) => ({ ...r, name: el.value }),
+        });
+      } else if (itemModel === 'grpc_request') {
+        await updateGrpcRequest.mutateAsync({
+          id: itemId,
+          update: (r) => ({ ...r, name: el.value }),
+        });
+      } else if (itemModel === 'websocket_request') {
+        const request = getWebsocketRequest(itemId);
+        if (request == null) return;
+        await upsertWebsocketRequest.mutateAsync({ ...request, name: el.value });
+      }
+      setEditing(false);
+    },
+    [itemId, itemModel, updateGrpcRequest, updateHttpRequest],
+  );
+
+  const handleFocus = useCallback((el: HTMLInputElement | null) => {
+    el?.focus();
+    el?.select();
+  }, []);
+
+  const handleInputKeyDown = useCallback(
+    async (e: React.KeyboardEvent<HTMLInputElement>) => {
+      e.stopPropagation();
+      switch (e.key) {
+        case 'Enter':
+          e.preventDefault();
+          await handleSubmitNameEdit(e.currentTarget);
+          break;
+        case 'Escape':
+          e.preventDefault();
+          setEditing(false);
+          break;
+      }
+    },
+    [handleSubmitNameEdit],
+  );
+
+  const handleStartEditing = useCallback(() => {
+    if (
+      itemModel !== 'http_request' &&
+      itemModel !== 'grpc_request' &&
+      itemModel !== 'websocket_request'
+    )
+      return;
+    setEditing(true);
+  }, [setEditing, itemModel]);
+
+  const handleBlur = useCallback(
+    async (e: React.FocusEvent<HTMLInputElement>) => {
+      await handleSubmitNameEdit(e.currentTarget);
+    },
+    [handleSubmitNameEdit],
+  );
+
+  const handleSelect = useCallback(async () => {
+    if (itemModel === 'folder') toggleCollapsed();
+    else onSelect(itemId);
+  }, [itemModel, toggleCollapsed, onSelect, itemId]);
+  const [showContextMenu, setShowContextMenu] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setShowContextMenu({ x: e.clientX, y: e.clientY });
+  }, []);
+
+  const handleCloseContextMenu = useCallback(() => setShowContextMenu(null), []);
+
+  const itemAtom = useMemo(() => {
+    return atom((get) => {
+      if (itemModel === 'folder') {
+        return get(foldersAtom).find((v) => v.id === itemId);
+      } else {
+        return get(requestsAtom).find((v) => v.id === itemId);
+      }
+    });
+  }, [itemId, itemModel]);
+
+  const item = useAtomValue(itemAtom);
+
+  if (item == null) {
+    return null;
+  }
+
+  const itemPrefix = item.model !== 'folder' && (
+    <HttpMethodTag
+      request={item}
+      className={classNames(!(active || selected) && 'text-text-subtlest')}
+    />
+  );
+
+  return (
+    <li ref={ref} draggable>
+      <div className={classNames(className, 'block relative group/item px-1.5 pb-0.5')}>
+        {showContextMenu && (
+          <SidebarItemContextMenu
+            child={child}
+            show={showContextMenu}
+            close={handleCloseContextMenu}
+          />
+        )}
+        <button
+          // tabIndex={-1} // Will prevent drag-n-drop
+          disabled={editing}
+          onClick={handleSelect}
+          onDoubleClick={handleStartEditing}
+          onContextMenu={handleContextMenu}
+          data-active={active}
+          data-selected={selected}
+          className={classNames(
+            'w-full flex gap-1.5 items-center h-xs px-1.5 rounded-md focus-visible:ring focus-visible:ring-border-focus outline-0',
+            editing && 'ring-1 focus-within:ring-focus',
+            'hover:bg-surface-highlight',
+            active && 'bg-surface-highlight text-text',
+            !active && 'text-text-subtle',
+            showContextMenu && '!text-text', // Show as "active" when the context menu is open
+          )}
+        >
+          {itemModel === 'folder' && (
+            <Icon
+              size="sm"
+              icon="chevron_right"
+              className={classNames(
+                'text-text-subtlest',
+                'transition-transform',
+                !collapsed && 'transform rotate-90',
+              )}
+            />
+          )}
+          <div className="flex items-center gap-2 min-w-0">
+            {itemPrefix}
+            {editing ? (
+              <input
+                ref={handleFocus}
+                defaultValue={itemName}
+                className="bg-transparent outline-none w-full cursor-text"
+                onBlur={handleBlur}
+                onKeyDown={handleInputKeyDown}
+              />
+            ) : (
+              <div className="truncate w-full">{itemName}</div>
+            )}
+          </div>
+          {latestGrpcConnection ? (
+            <div className="ml-auto">
+              {latestGrpcConnection.state !== 'closed' && (
+                <Icon spin size="sm" icon="update" className="text-text-subtlest" />
+              )}
+            </div>
+          ) : latestHttpResponse ? (
+            <div className="ml-auto">
+              {latestHttpResponse.state !== 'closed' ? (
+                <Icon spin size="sm" icon="refresh" className="text-text-subtlest" />
+              ) : (
+                <StatusTag className="text-xs" response={latestHttpResponse} />
+              )}
+            </div>
+          ) : null}
+        </button>
+      </div>
+      {collapsed ? null : children}
+    </li>
+  );
+});

src-web/components/sidebar/SidebarItemContextMenu.tsx

@@ -0,0 +1,153 @@
+import React, { useMemo } from 'react';
+import { useCreateDropdownItems } from '../../hooks/useCreateDropdownItems';
+import { useDeleteFolder } from '../../hooks/useDeleteFolder';
+import { useDeleteAnyRequest } from '../../hooks/useDeleteAnyRequest';
+import { useDuplicateFolder } from '../../hooks/useDuplicateFolder';
+import { useDuplicateGrpcRequest } from '../../hooks/useDuplicateGrpcRequest';
+import { useDuplicateHttpRequest } from '../../hooks/useDuplicateHttpRequest';
+import { useHttpRequestActions } from '../../hooks/useHttpRequestActions';
+import { useMoveToWorkspace } from '../../hooks/useMoveToWorkspace';
+import { useRenameRequest } from '../../hooks/useRenameRequest';
+import { useSendAnyHttpRequest } from '../../hooks/useSendAnyHttpRequest';
+import { useSendManyRequests } from '../../hooks/useSendManyRequests';
+import { useWorkspaces } from '../../hooks/useWorkspaces';
+
+import { showDialog } from '../../lib/dialog';
+import type { DropdownItem } from '../core/Dropdown';
+import { ContextMenu } from '../core/Dropdown';
+import { Icon } from '../core/Icon';
+import { FolderSettingsDialog } from '../FolderSettingsDialog';
+import type { SidebarTreeNode } from './Sidebar';
+import { getHttpRequest } from '../../hooks/useHttpRequests';
+
+interface Props {
+  child: SidebarTreeNode;
+  show: { x: number; y: number } | null;
+  close: () => void;
+}
+
+export function SidebarItemContextMenu({ child, show, close }: Props) {
+  const sendManyRequests = useSendManyRequests();
+  const duplicateFolder = useDuplicateFolder(child.id);
+  const deleteFolder = useDeleteFolder(child.id);
+  const httpRequestActions = useHttpRequestActions();
+  const sendRequest = useSendAnyHttpRequest();
+  const workspaces = useWorkspaces();
+  const deleteRequest = useDeleteAnyRequest();
+  const renameRequest = useRenameRequest(child.id);
+  const duplicateHttpRequest = useDuplicateHttpRequest({ id: child.id, navigateAfter: true });
+  const duplicateGrpcRequest = useDuplicateGrpcRequest({ id: child.id, navigateAfter: true });
+  const moveToWorkspace = useMoveToWorkspace(child.id);
+  const createDropdownItems = useCreateDropdownItems({
+    folderId: child.model === 'folder' ? child.id : null,
+  });
+
+  const items = useMemo((): DropdownItem[] => {
+    if (child.model === 'folder') {
+      return [
+        {
+          label: 'Send All',
+          leftSlot: <Icon icon="send_horizontal" />,
+          onSelect: () => sendManyRequests.mutate(child.children.map((c) => c.id)),
+        },
+        {
+          label: 'Settings',
+          leftSlot: <Icon icon="settings" />,
+          onSelect: () =>
+            showDialog({
+              id: 'folder-settings',
+              title: 'Folder Settings',
+              size: 'md',
+              render: () => <FolderSettingsDialog folderId={child.id} />,
+            }),
+        },
+        {
+          label: 'Duplicate',
+          leftSlot: <Icon icon="copy" />,
+          onSelect: () => duplicateFolder.mutate(),
+        },
+        {
+          label: 'Delete',
+          color: 'danger',
+          leftSlot: <Icon icon="trash" />,
+          onSelect: () => deleteFolder.mutate(),
+        },
+        { type: 'separator' },
+        ...createDropdownItems,
+      ];
+    } else {
+      const requestItems: DropdownItem[] =
+        child.model === 'http_request'
+          ? [
+              {
+                label: 'Send',
+                hotKeyAction: 'http_request.send',
+                hotKeyLabelOnly: true, // Already bound in URL bar
+                leftSlot: <Icon icon="send_horizontal" />,
+                onSelect: () => sendRequest.mutate(child.id),
+              },
+              ...httpRequestActions.map((a) => ({
+                label: a.label,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                leftSlot: <Icon icon={(a.icon as any) ?? 'empty'} />,
+                onSelect: async () => {
+                  const request = getHttpRequest(child.id);
+                  if (request != null) await a.call(request);
+                },
+              })),
+              { type: 'separator' },
+            ]
+          : [];
+      return [
+        ...requestItems,
+        {
+          label: 'Rename',
+          leftSlot: <Icon icon="pencil" />,
+          onSelect: renameRequest.mutate,
+        },
+        {
+          label: 'Duplicate',
+          hotKeyAction: 'http_request.duplicate',
+          hotKeyLabelOnly: true, // Would trigger for every request (bad)
+          leftSlot: <Icon icon="copy" />,
+          onSelect: () =>
+            child.model === 'http_request'
+              ? duplicateHttpRequest.mutate()
+              : duplicateGrpcRequest.mutate(),
+        },
+        {
+          label: 'Move',
+          leftSlot: <Icon icon="arrow_right_circle" />,
+          hidden: workspaces.length <= 1,
+          onSelect: moveToWorkspace.mutate,
+        },
+        {
+          color: 'danger',
+          label: 'Delete',
+          hotKeyAction: 'http_request.delete',
+          hotKeyLabelOnly: true,
+          leftSlot: <Icon icon="trash" />,
+          onSelect: () => deleteRequest.mutate(child.id),
+        },
+      ];
+    }
+  }, [
+    child.children,
+    child.id,
+    child.model,
+    createDropdownItems,
+    deleteFolder,
+    deleteRequest,
+    duplicateFolder,
+    duplicateGrpcRequest,
+    duplicateHttpRequest,
+    httpRequestActions,
+    moveToWorkspace.mutate,
+    renameRequest.mutate,
+    sendManyRequests,
+    sendRequest,
+    workspaces.length,
+  ]);
+
+  return <ContextMenu triggerPosition={show} items={items} onClose={close} />;
+}

src-web/components/sidebar/SidebarItems.tsx

@@ -0,0 +1,89 @@
+import type { GrpcConnection, HttpResponse } from '@yaakapp-internal/models';
+import classNames from 'classnames';
+import React, { Fragment, memo } from 'react';
+import { VStack } from '../core/Stacks';
+import { DropMarker } from '../DropMarker';
+import type { SidebarTreeNode } from './Sidebar';
+import { SidebarItem } from './SidebarItem';
+
+export interface SidebarItemsProps {
+  tree: SidebarTreeNode;
+  draggingId: string | null;
+  selectedTree: SidebarTreeNode | null;
+  treeParentMap: Record<string, SidebarTreeNode>;
+  hoveredTree: SidebarTreeNode | null;
+  hoveredIndex: number | null;
+  handleMove: (id: string, side: 'above' | 'below') => void;
+  handleEnd: (id: string) => void;
+  handleDragStart: (id: string) => void;
+  onSelect: (requestId: string) => void;
+  httpResponses: HttpResponse[];
+  grpcConnections: GrpcConnection[];
+}
+
+export const SidebarItems = memo(function SidebarItems({
+  tree,
+  selectedTree,
+  draggingId,
+  onSelect,
+  treeParentMap,
+  hoveredTree,
+  hoveredIndex,
+  handleEnd,
+  handleMove,
+  handleDragStart,
+  httpResponses,
+  grpcConnections,
+}: SidebarItemsProps) {
+  return (
+    <VStack
+      as="ul"
+      role="menu"
+      aria-orientation="vertical"
+      dir="ltr"
+      className={classNames(
+        tree.depth > 0 && 'border-l border-border-subtle',
+        tree.depth === 0 && 'ml-0',
+        tree.depth >= 1 && 'ml-[1.2rem]',
+      )}
+    >
+      {tree.children.map((child, i) => {
+        return (
+          <Fragment key={child.id}>
+            {hoveredIndex === i && hoveredTree?.id === tree.id && <DropMarker />}
+            <SidebarItem
+              itemId={child.id}
+              itemName={child.name}
+              itemModel={child.model}
+              latestHttpResponse={httpResponses.find((r) => r.requestId === child.id) ?? null}
+              latestGrpcConnection={grpcConnections.find((c) => c.requestId === child.id) ?? null}
+              onMove={handleMove}
+              onEnd={handleEnd}
+              onSelect={onSelect}
+              onDragStart={handleDragStart}
+              child={child}
+            >
+              {child.model === 'folder' && draggingId !== child.id ? (
+                <SidebarItems
+                  draggingId={draggingId}
+                  handleDragStart={handleDragStart}
+                  handleEnd={handleEnd}
+                  handleMove={handleMove}
+                  hoveredIndex={hoveredIndex}
+                  hoveredTree={hoveredTree}
+                  httpResponses={httpResponses}
+                  grpcConnections={grpcConnections}
+                  onSelect={onSelect}
+                  selectedTree={selectedTree}
+                  tree={child}
+                  treeParentMap={treeParentMap}
+                />
+              ) : null}
+            </SidebarItem>
+          </Fragment>
+        );
+      })}
+      {hoveredIndex === tree.children.length && hoveredTree?.id === tree.id && <DropMarker />}
+    </VStack>
+  );
+});