Add tree rename (on Enter) and global rename hotkeys (#279)

2026-03-26 19:31:12 +01:00 · 2025-10-24 08:01:38 -07:00
parent 43437abae7
commit 1198aa7d87
9 changed files with 218 additions and 93 deletions
--- a/src-web/components/CommandPaletteDialog.tsx
+++ b/src-web/components/CommandPaletteDialog.tsx
@@ -85,6 +85,11 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
        action: 'settings.show',
        onSelect: () => openSettings.mutate(null),
      },
+      {
+        key: 'folder.create',
+        label: 'Create Folder',
+        onSelect: () => createFolder.mutate({}),
+      },
      {
        key: 'app.create',
        label: 'Create Workspace',
@@ -177,7 +182,7 @@ export function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
      });

      commands.push({
-        key: 'sidebar.delete_selected_item',
+        key: 'sidebar.selected.delete',
        label: 'Delete Request',
        onSelect: () => deleteModelWithConfirm(activeRequest),
      });
--- a/src-web/components/GlobalHooks.tsx
+++ b/src-web/components/GlobalHooks.tsx
@@ -1,11 +1,14 @@
+import { activeRequestAtom } from '../hooks/useActiveRequest';
 import { useSubscribeActiveWorkspaceId } from '../hooks/useActiveWorkspace';
 import { useActiveWorkspaceChangedToast } from '../hooks/useActiveWorkspaceChangedToast';
-import { useSubscribeHotKeys } from '../hooks/useHotKey';
+import { useHotKey, useSubscribeHotKeys } from '../hooks/useHotKey';
 import { useSubscribeHttpAuthentication } from '../hooks/useHttpAuthentication';
 import { useSyncFontSizeSetting } from '../hooks/useSyncFontSizeSetting';
 import { useSyncWorkspaceChildModels } from '../hooks/useSyncWorkspaceChildModels';
 import { useSyncZoomSetting } from '../hooks/useSyncZoomSetting';
 import { useSubscribeTemplateFunctions } from '../hooks/useTemplateFunctions';
+import { jotaiStore } from '../lib/jotai';
+import { renameModelWithPrompt } from '../lib/renameModelWithPrompt';

 export function GlobalHooks() {
  useSyncZoomSetting();
@@ -21,5 +24,15 @@ export function GlobalHooks() {
  useActiveWorkspaceChangedToast();
  useSubscribeHotKeys();

+  useHotKey(
+    'request.rename',
+    async () => {
+      const model = jotaiStore.get(activeRequestAtom);
+      if (model == null) return;
+      await renameModelWithPrompt(model);
+    },
+    { allowDefault: true },
+  );
+
  return null;
 }
--- a/src-web/components/NewSidebar.tsx
+++ b/src-web/components/NewSidebar.tsx
@@ -256,38 +256,53 @@ const sidebarTreeAtom = atom((get) => {
 });

 const actions = {
-  'sidebar.delete_selected_item': async function (items: SidebarModel[]) {
-    await deleteModelWithConfirm(items);
+  'sidebar.selected.delete': {
+    enable: isSidebarFocused,
+    cb: async function (_: TreeHandle, items: SidebarModel[]) {
+      await deleteModelWithConfirm(items);
+    },
  },
-  'model.duplicate': async function (items: SidebarModel[]) {
-    if (items.length === 1) {
-      const item = items[0]!;
-      const newId = await duplicateModel(item);
-      navigateToRequestOrFolderOrWorkspace(newId, item.model);
-    } else {
-      await Promise.all(items.map(duplicateModel));
-    }
+  'sidebar.selected.rename': {
+    enable: isSidebarFocused,
+    allowDefault: true,
+    cb: async function (tree: TreeHandle, items: SidebarModel[]) {
+      const item = items[0];
+      if (items.length === 1 && item != null) {
+        tree.renameItem(item.id);
+      }
+    },
  },
-  'request.send': async function (items: SidebarModel[]) {
-    await Promise.all(
-      items.filter((i) => i.model === 'http_request').map((i) => sendAnyHttpRequest.mutate(i.id)),
-    );
+  'sidebar.selected.duplicate': {
+    priority: 999,
+    enable: isSidebarFocused,
+    cb: async function (_: TreeHandle, items: SidebarModel[]) {
+      if (items.length === 1) {
+        const item = items[0]!;
+        const newId = await duplicateModel(item);
+        navigateToRequestOrFolderOrWorkspace(newId, item.model);
+      } else {
+        await Promise.all(items.map(duplicateModel));
+      }
+    },
+  },
+  'request.send': {
+    enable: isSidebarFocused,
+    cb: async function (_: TreeHandle, items: SidebarModel[]) {
+      await Promise.all(
+        items.filter((i) => i.model === 'http_request').map((i) => sendAnyHttpRequest.mutate(i.id)),
+      );
+    },
  },
 } as const;

-const hotkeys: TreeProps<SidebarModel>['hotkeys'] = {
-  priority: 10, // So these ones take precedence over global hotkeys when the sidebar is focused
-  actions,
-  enable: () => isSidebarFocused(),
-};
+const hotkeys: TreeProps<SidebarModel>['hotkeys'] = { actions };

-async function getContextMenu(items: SidebarModel[]): Promise<DropdownItem[]> {
+async function getContextMenu(tree: TreeHandle, items: SidebarModel[]): Promise<DropdownItem[]> {
  const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
  const child = items[0];

  // No children means we're in the root
  if (child == null) {
-    console.log('HELLO', child);
    return getCreateDropdownItems({ workspaceId, activeRequest: null, folderId: null });
  }

@@ -321,7 +336,7 @@ async function getContextMenu(items: SidebarModel[]): Promise<DropdownItem[]> {
      hotKeyLabelOnly: true,
      hidden: !onlyHttpRequests,
      leftSlot: <Icon icon="send_horizontal" />,
-      onSelect: () => actions['request.send'](items),
+      onSelect: () => actions['request.send'].cb(tree, items),
    },
    ...(items.length === 1 && child.model === 'http_request'
      ? await getHttpRequestActions()
@@ -362,6 +377,8 @@ async function getContextMenu(items: SidebarModel[]): Promise<DropdownItem[]> {
      label: 'Rename',
      leftSlot: <Icon icon="pencil" />,
      hidden: items.length > 1,
+      hotKeyAction: 'sidebar.selected.rename',
+      hotKeyLabelOnly: true,
      onSelect: async () => {
        const request = getModel(
          ['folder', 'http_request', 'grpc_request', 'websocket_request'],
@@ -375,7 +392,7 @@ async function getContextMenu(items: SidebarModel[]): Promise<DropdownItem[]> {
      hotKeyAction: 'model.duplicate',
      hotKeyLabelOnly: true, // Would trigger for every request (bad)
      leftSlot: <Icon icon="copy" />,
-      onSelect: () => actions['model.duplicate'](items),
+      onSelect: () => actions['sidebar.selected.duplicate'].cb(tree, items),
    },
    {
      label: 'Move',
@@ -393,10 +410,10 @@ async function getContextMenu(items: SidebarModel[]): Promise<DropdownItem[]> {
    {
      color: 'danger',
      label: 'Delete',
-      hotKeyAction: 'sidebar.delete_selected_item',
+      hotKeyAction: 'sidebar.selected.delete',
      hotKeyLabelOnly: true,
      leftSlot: <Icon icon="trash" />,
-      onSelect: () => actions['sidebar.delete_selected_item'](items),
+      onSelect: () => actions['sidebar.selected.delete'].cb(tree, items),
    },
    ...modelCreationItems,
  ];
--- a/src-web/components/RecentRequestsDropdown.tsx
+++ b/src-web/components/RecentRequestsDropdown.tsx
@@ -32,7 +32,7 @@ export function RecentRequestsDropdown({ className }: Props) {
    }
  });

-  useHotKey('request_switcher.prev', () => {
+  useHotKey('switcher.prev', () => {
    if (!dropdownRef.current?.isOpen) {
      // Select the second because the first is the current request
      dropdownRef.current?.open(1);
@@ -41,7 +41,7 @@ export function RecentRequestsDropdown({ className }: Props) {
    }
  });

-  useHotKey('request_switcher.next', () => {
+  useHotKey('switcher.next', () => {
    if (!dropdownRef.current?.isOpen) dropdownRef.current?.open();
    dropdownRef.current?.prev?.();
  });
@@ -87,7 +87,7 @@ export function RecentRequestsDropdown({ className }: Props) {
    <Dropdown ref={dropdownRef} items={items}>
      <Button
        size="sm"
-        hotkeyAction="request_switcher.toggle"
+        hotkeyAction="switcher.toggle"
        className={classNames(
          className,
          'truncate pointer-events-auto',
--- a/src-web/components/core/Dropdown.tsx
+++ b/src-web/components/core/Dropdown.tsx
@@ -413,7 +413,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
        close: handleClose,
        prev: handlePrev,
        next: handleNext,
-        async select() {
+        select: async () => {
          const item = items[selectedIndexRef.current ?? -1] ?? null;
          if (!item) return;
          await handleSelect(item);
@@ -569,10 +569,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
                      <div
                        key={i}
                        className={classNames('my-1 mx-2 max-w-xs')}
-                        onClick={() => {
-                          // Ensure the dropdown is closed when anything in the content is clicked
-                          onClose();
-                        }}
+                        onClick={onClose}
                      >
                        {item.label}
                      </div>
--- a/src-web/components/core/tree/Tree.tsx
+++ b/src-web/components/core/tree/Tree.tsx
@@ -36,7 +36,7 @@ import {
 import type { SelectableTreeNode, TreeNode } from './common';
 import { equalSubtree, getSelectedItems, hasAncestor } from './common';
 import { TreeDragOverlay } from './TreeDragOverlay';
-import type { TreeItemProps } from './TreeItem';
+import type { TreeItemHandle, TreeItemProps } from './TreeItem';
 import type { TreeItemListProps } from './TreeItemList';
 import { TreeItemList } from './TreeItemList';
 import { useSelectableItems } from './useSelectableItems';
@@ -45,13 +45,23 @@ export interface TreeProps<T extends { id: string }> {
  root: TreeNode<T>;
  treeId: string;
  getItemKey: (item: T) => string;
-  getContextMenu?: (items: T[]) => Promise<ContextMenuProps['items']>;
+  getContextMenu?: (t: TreeHandle, items: T[]) => Promise<ContextMenuProps['items']>;
  ItemInner: ComponentType<{ treeId: string; item: T }>;
  ItemLeftSlot?: ComponentType<{ treeId: string; item: T }>;
  className?: string;
  onActivate?: (item: T) => void;
  onDragEnd?: (opt: { items: T[]; parent: T; children: T[]; insertAt: number }) => void;
-  hotkeys?: { actions: Partial<Record<HotkeyAction, (items: T[]) => void>> } & HotKeyOptions;
+  hotkeys?: {
+    actions: Partial<
+      Record<
+        HotkeyAction,
+        {
+          cb: (h: TreeHandle, items: T[]) => void;
+          enable?: boolean | ((h: TreeHandle) => boolean);
+        } & Omit<HotKeyOptions, 'enable'>
+      >
+    >;
+  };
  getEditOptions?: (item: T) => {
    defaultValue: string;
    placeholder?: string;
@@ -62,6 +72,7 @@ export interface TreeProps<T extends { id: string }> {
 export interface TreeHandle {
  focus: () => void;
  selectItem: (id: string) => void;
+  renameItem: (id: string) => void;
 }

 function TreeInner<T extends { id: string }>(
@@ -87,6 +98,15 @@ function TreeInner<T extends { id: string }>(
    x: number;
    y: number;
  } | null>(null);
+  const treeItemRefs = useRef<Record<string, TreeItemHandle>>({});
+
+  const handleAddTreeItemRef = useCallback((item: T, r: TreeItemHandle | null) => {
+    if (r == null) {
+      delete treeItemRefs.current[item.id];
+    } else {
+      treeItemRefs.current[item.id] = r;
+    }
+  }, []);

  const handleCloseContextMenu = useCallback(() => {
    setShowContextMenu(null);
@@ -105,11 +125,11 @@ function TreeInner<T extends { id: string }>(
    [treeId, tryFocus],
  );

-  useImperativeHandle(
-    ref,
-    (): TreeHandle => ({
+  const treeHandle = useMemo<TreeHandle>(
+    () => ({
      focus: tryFocus,
-      selectItem(id) {
+      renameItem: (id) => treeItemRefs.current[id]?.rename(),
+      selectItem: (id) => {
        setSelected([id], false);
        jotaiStore.set(focusIdsFamily(treeId), { anchorId: id, lastId: id });
      },
@@ -117,6 +137,8 @@ function TreeInner<T extends { id: string }>(
    [setSelected, treeId, tryFocus],
  );

+  useImperativeHandle(ref, (): TreeHandle => treeHandle, [treeHandle]);
+
  const handleGetContextMenu = useMemo(() => {
    if (getContextMenu == null) return;
    return (item: T) => {
@@ -124,16 +146,16 @@ function TreeInner<T extends { id: string }>(
      const isSelected = items.find((i) => i.id === item.id);
      if (isSelected) {
        // If right-clicked an item that was in the multiple-selection, use the entire selection
-        return getContextMenu(items);
+        return getContextMenu(treeHandle, items);
      } else {
        // If right-clicked an item that was NOT in the multiple-selection, just use that one
        // Also update the selection with it
        jotaiStore.set(selectedIdsFamily(treeId), [item.id]);
        jotaiStore.set(focusIdsFamily(treeId), (prev) => ({ ...prev, lastId: item.id }));
-        return getContextMenu([item]);
+        return getContextMenu(treeHandle, [item]);
      }
    };
-  }, [getContextMenu, selectableItems, treeId]);
+  }, [getContextMenu, selectableItems, treeHandle, treeId]);

  const handleSelect = useCallback<NonNullable<TreeItemProps<T>['onClick']>>(
    (item, { shiftKey, metaKey, ctrlKey }) => {
@@ -141,7 +163,7 @@ function TreeInner<T extends { id: string }>(
      const selectedIdsAtom = selectedIdsFamily(treeId);
      const selectedIds = jotaiStore.get(selectedIdsAtom);

-      // Mark item as the last one selected
+      // Mark the item as the last one selected
      jotaiStore.set(focusIdsFamily(treeId), (prev) => ({ ...prev, lastId: item.id }));

      if (shiftKey) {
@@ -427,17 +449,22 @@ function TreeInner<T extends { id: string }>(

      e.preventDefault();
      e.stopPropagation();
-      const items = await getContextMenu([]);
+      const items = await getContextMenu(treeHandle, []);
      setShowContextMenu({ items, x: e.clientX, y: e.clientY });
    },
-    [getContextMenu],
+    [getContextMenu, treeHandle],
  );

  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));

  return (
    <>
-      <TreeHotKeys treeId={treeId} hotkeys={hotkeys} selectableItems={selectableItems} />
+      <TreeHotKeys
+        treeHandle={treeHandle}
+        treeId={treeId}
+        hotkeys={hotkeys}
+        selectableItems={selectableItems}
+      />
      {showContextMenu && (
        <ContextMenu
          items={showContextMenu.items}
@@ -479,7 +506,12 @@ function TreeInner<T extends { id: string }>(
              '[&_.tree-item.selected:has(+.drop-marker+.tree-item.selected)]:rounded-b-none',
            )}
          >
-            <TreeItemList nodes={selectableItems} treeId={treeId} {...treeItemListProps} />
+            <TreeItemList
+              addTreeItemRef={handleAddTreeItemRef}
+              nodes={selectableItems}
+              treeId={treeId}
+              {...treeItemListProps}
+            />
          </div>
          {/* Assign root ID so we can reuse our same move/end logic */}
          <DropRegionAfterList id={root.item.id} onContextMenu={handleContextMenu} />
@@ -523,11 +555,14 @@ function DropRegionAfterList({
  return <div ref={setNodeRef} onContextMenu={onContextMenu} />;
 }

-interface TreeHotKeyProps<T extends { id: string }> extends HotKeyOptions {
+interface TreeHotKeyProps<T extends { id: string }> {
  action: HotkeyAction;
  selectableItems: SelectableTreeNode<T>[];
  treeId: string;
-  onDone: (items: T[]) => void;
+  onDone: (h: TreeHandle, items: T[]) => void;
+  treeHandle: TreeHandle;
+  priority?: number;
+  enable?: boolean | ((h: TreeHandle) => boolean);
 }

 function TreeHotKey<T extends { id: string }>({
@@ -535,14 +570,23 @@ function TreeHotKey<T extends { id: string }>({
  action,
  onDone,
  selectableItems,
+  treeHandle,
+  enable,
  ...options
 }: TreeHotKeyProps<T>) {
  useHotKey(
    action,
    () => {
-      onDone(getSelectedItems(treeId, selectableItems));
+      onDone(treeHandle, getSelectedItems(treeId, selectableItems));
+    },
+    {
+      ...options,
+      enable: () => {
+        if (enable == null) return true;
+        if (typeof enable === 'function') return enable(treeHandle);
+        else return enable;
+      },
    },
-    options,
  );
  return null;
 }
@@ -551,24 +595,26 @@ function TreeHotKeys<T extends { id: string }>({
  treeId,
  hotkeys,
  selectableItems,
+  treeHandle,
 }: {
  treeId: string;
  hotkeys: TreeProps<T>['hotkeys'];
  selectableItems: SelectableTreeNode<T>[];
+  treeHandle: TreeHandle;
 }) {
  if (hotkeys == null) return null;

  return (
    <>
-      {Object.entries(hotkeys.actions).map(([hotkey, onDone]) => (
+      {Object.entries(hotkeys.actions).map(([hotkey, { cb, ...options }]) => (
        <TreeHotKey
          key={hotkey}
          action={hotkey as HotkeyAction}
-          priority={hotkeys.priority}
-          enable={hotkeys.enable}
          treeId={treeId}
-          onDone={onDone}
+          onDone={cb}
+          treeHandle={treeHandle}
          selectableItems={selectableItems}
+          {...options}
        />
      ))}
    </>
--- a/src-web/components/core/tree/TreeItem.tsx
+++ b/src-web/components/core/tree/TreeItem.tsx
@@ -3,8 +3,8 @@ import { useDndMonitor, useDraggable, useDroppable } from '@dnd-kit/core';
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
 import { selectAtom } from 'jotai/utils';
-import type { MouseEvent, PointerEvent } from 'react';
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { MouseEvent, PointerEvent, ReactElement, RefAttributes } from 'react';
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { computeSideForDragMove } from '../../../lib/dnd';
 import { jotaiStore } from '../../../lib/jotai';
 import type { ContextMenuProps, DropdownItem } from '../Dropdown';
@@ -30,11 +30,17 @@ export type TreeItemProps<T extends { id: string }> = Pick<
  onClick?: (item: T, e: OnClickEvent) => void;
  getContextMenu?: (item: T) => Promise<ContextMenuProps['items']>;
  depth: number;
+  addRef?: (item: T, n: TreeItemHandle | null) => void;
 };

+export interface TreeItemHandle {
+  rename: () => void;
+  isRenaming: boolean;
+}
+
 const HOVER_CLOSED_FOLDER_DELAY = 800;

-function TreeItem_<T extends { id: string }>({
+function TreeItemInner<T extends { id: string }>({
  treeId,
  node,
  ItemInner,
@@ -44,8 +50,9 @@ function TreeItem_<T extends { id: string }>({
  getEditOptions,
  className,
  depth,
+  addRef,
 }: TreeItemProps<T>) {
-  const ref = useRef<HTMLLIElement>(null);
+  const listItemRef = useRef<HTMLLIElement>(null);
  const draggableRef = useRef<HTMLButtonElement>(null);
  const isSelected = useAtomValue(isSelectedFamily({ treeId, itemId: node.item.id }));
  const isCollapsed = useAtomValue(isCollapsedFamily({ treeId, itemId: node.item.id }));
@@ -54,6 +61,17 @@ function TreeItem_<T extends { id: string }>({
  const [dropHover, setDropHover] = useState<null | 'drop' | 'animate'>(null);
  const startedHoverTimeout = useRef<NodeJS.Timeout>(undefined);

+  useEffect(() => {
+    addRef?.(node.item, {
+      rename: () => {
+        if (getEditOptions != null) {
+          setEditing(true);
+        }
+      },
+      isRenaming: editing,
+    });
+  }, [addRef, editing, getEditOptions, node.item]);
+
  const isAncestorCollapsedAtom = useMemo(
    () =>
      selectAtom(
@@ -80,7 +98,7 @@ function TreeItem_<T extends { id: string }>({
  useEffect(
    function scrollIntoViewWhenSelected() {
      return jotaiStore.sub(isSelectedFamily({ treeId, itemId: node.item.id }), () => {
-        ref.current?.scrollIntoView({ block: 'nearest' });
+        listItemRef.current?.scrollIntoView({ block: 'nearest' });
      });
    },
    [node.item.id, treeId],
@@ -103,10 +121,11 @@ function TreeItem_<T extends { id: string }>({
  const handleSubmitNameEdit = useCallback(
    async function submitNameEdit(el: HTMLInputElement) {
      getEditOptions?.(node.item).onChange(node.item, el.value);
+      onClick?.(node.item, { shiftKey: false, ctrlKey: false, metaKey: false });
      // Slight delay for the model to propagate to the local store
      setTimeout(() => setEditing(false), 200);
    },
-    [getEditOptions, node.item],
+    [getEditOptions, node.item, onClick],
  );

  const handleEditFocus = useCallback(function handleEditFocus(el: HTMLInputElement | null) {
@@ -126,8 +145,10 @@ function TreeItem_<T extends { id: string }>({
      e.stopPropagation();
      switch (e.key) {
        case 'Enter':
-          e.preventDefault();
-          await handleSubmitNameEdit(e.currentTarget);
+          if (editing) {
+            e.preventDefault();
+            await handleSubmitNameEdit(e.currentTarget);
+          }
          break;
        case 'Escape':
          e.preventDefault();
@@ -135,7 +156,7 @@ function TreeItem_<T extends { id: string }>({
          break;
      }
    },
-    [handleSubmitNameEdit],
+    [editing, handleSubmitNameEdit],
  );

  const handleDoubleClick = useCallback(() => {
@@ -222,7 +243,7 @@ function TreeItem_<T extends { id: string }>({

  return (
    <li
-      ref={ref}
+      ref={listItemRef}
      role="treeitem"
      aria-level={depth + 1}
      aria-expanded={node.children == null ? undefined : !isCollapsed}
@@ -304,6 +325,11 @@ function TreeItem_<T extends { id: string }>({
  );
 }

+// 1) Preserve generics through forwardRef:
+const TreeItem_ = forwardRef(TreeItemInner) as <T extends { id: string }>(
+  props: TreeItemProps<T> & RefAttributes<TreeItemHandle>,
+) => ReactElement | null;
+
 export const TreeItem = memo(
  TreeItem_,
  ({ node: prevNode, ...prevProps }, { node: nextNode, ...nextProps }) => {
--- a/src-web/components/core/tree/TreeItemList.tsx
+++ b/src-web/components/core/tree/TreeItemList.tsx
@@ -3,7 +3,7 @@ import { Fragment, memo } from 'react';
 import type { SelectableTreeNode } from './common';
 import type { TreeProps } from './Tree';
 import { TreeDropMarker } from './TreeDropMarker';
-import type { TreeItemProps } from './TreeItem';
+import type { TreeItemHandle, TreeItemProps } from './TreeItem';
 import { TreeItem } from './TreeItem';

 export type TreeItemListProps<T extends { id: string }> = Pick<
@@ -15,6 +15,7 @@ export type TreeItemListProps<T extends { id: string }> = Pick<
    style?: CSSProperties;
    className?: string;
    forceDepth?: number;
+    addTreeItemRef?: (item: T, n: TreeItemHandle | null) => void;
  };

 function TreeItemList_<T extends { id: string }>({
@@ -29,6 +30,7 @@ function TreeItemList_<T extends { id: string }>({
  style,
  treeId,
  forceDepth,
+  addTreeItemRef,
 }: TreeItemListProps<T>) {
  return (
    <ul role="tree" style={style} className={className}>
@@ -36,6 +38,7 @@ function TreeItemList_<T extends { id: string }>({
      {nodes.map((child, i) => (
        <Fragment key={getItemKey(child.node.item)}>
          <TreeItem
+            addRef={addTreeItemRef}
            treeId={treeId}
            node={child.node}
            ItemInner={ItemInner}
@@ -46,7 +49,7 @@ function TreeItemList_<T extends { id: string }>({
            getItemKey={getItemKey}
            depth={forceDepth == null ? child.depth : forceDepth}
          />
-          <TreeDropMarker node={child.node} treeId={treeId} index={i+1} />
+          <TreeDropMarker node={child.node} treeId={treeId} index={i + 1} />
        </Fragment>
      ))}
    </ul>
--- a/src-web/hooks/useHotKey.ts
+++ b/src-web/hooks/useHotKey.ts
@@ -6,6 +6,7 @@ import { capitalize } from '../lib/capitalize';
 import { jotaiStore } from '../lib/jotai';

 const HOLD_KEYS = ['Shift', 'Control', 'Command', 'Alt', 'Meta'];
+const SINGLE_WHITELIST = ['Delete', 'Enter', 'Backspace'];

 export type HotkeyAction =
  | 'app.zoom_in'
@@ -17,11 +18,14 @@ export type HotkeyAction =
  | 'model.create'
  | 'model.duplicate'
  | 'request.send'
-  | 'request_switcher.next'
-  | 'request_switcher.prev'
-  | 'request_switcher.toggle'
+  | 'request.rename'
+  | 'switcher.next'
+  | 'switcher.prev'
+  | 'switcher.toggle'
  | 'settings.show'
-  | 'sidebar.delete_selected_item'
+  | 'sidebar.selected.delete'
+  | 'sidebar.selected.duplicate'
+  | 'sidebar.selected.rename'
  | 'sidebar.focus'
  | 'url_bar.focus'
  | 'workspace_settings.show';
@@ -32,15 +36,18 @@ const hotkeys: Record<HotkeyAction, string[]> = {
  'app.zoom_reset': ['CmdCtrl+0'],
  'command_palette.toggle': ['CmdCtrl+k'],
  'environmentEditor.toggle': ['CmdCtrl+Shift+E', 'CmdCtrl+Shift+e'],
+  'request.rename': type() === 'macos' ? ['Control+Shift+r'] : ['F2'],
  'request.send': ['CmdCtrl+Enter', 'CmdCtrl+r'],
  'hotkeys.showHelp': ['CmdCtrl+Shift+/', 'CmdCtrl+Shift+?'], // when shift is pressed, it might be a question mark
  'model.create': ['CmdCtrl+n'],
  'model.duplicate': ['CmdCtrl+d'],
-  'request_switcher.next': ['Control+Shift+Tab'],
-  'request_switcher.prev': ['Control+Tab'],
-  'request_switcher.toggle': ['CmdCtrl+p'],
+  'switcher.next': ['Control+Shift+Tab'],
+  'switcher.prev': ['Control+Tab'],
+  'switcher.toggle': ['CmdCtrl+p'],
  'settings.show': ['CmdCtrl+,'],
-  'sidebar.delete_selected_item': ['Delete', 'CmdCtrl+Backspace'],
+  'sidebar.selected.delete': ['Delete', 'CmdCtrl+Backspace'],
+  'sidebar.selected.duplicate': ['CmdCtrl+d'],
+  'sidebar.selected.rename': ['Enter'],
  'sidebar.focus': ['CmdCtrl+b'],
  'url_bar.focus': ['CmdCtrl+l'],
  'workspace_settings.show': ['CmdCtrl+;'],
@@ -55,12 +62,15 @@ const hotkeyLabels: Record<HotkeyAction, string> = {
  'hotkeys.showHelp': 'Show Keyboard Shortcuts',
  'model.create': 'New Request',
  'model.duplicate': 'Duplicate Request',
+  'request.rename': 'Rename',
  'request.send': 'Send',
-  'request_switcher.next': 'Go To Previous Request',
-  'request_switcher.prev': 'Go To Next Request',
-  'request_switcher.toggle': 'Toggle Request Switcher',
+  'switcher.next': 'Go To Previous Request',
+  'switcher.prev': 'Go To Next Request',
+  'switcher.toggle': 'Toggle Request Switcher',
  'settings.show': 'Open Settings',
-  'sidebar.delete_selected_item': 'Delete Request',
+  'sidebar.selected.delete': 'Delete',
+  'sidebar.selected.duplicate': 'Duplicate',
+  'sidebar.selected.rename': 'Rename',
  'sidebar.focus': 'Focus or Toggle Sidebar',
  'url_bar.focus': 'Focus URL',
  'workspace_settings.show': 'Open Workspace Settings',
@@ -73,6 +83,7 @@ export const hotkeyActions: HotkeyAction[] = Object.keys(hotkeys) as (keyof type
 export type HotKeyOptions = {
  enable?: boolean | (() => boolean);
  priority?: number;
+  allowDefault?: boolean;
 };

 interface Callback {
@@ -142,7 +153,7 @@ function handleKeyUp(e: KeyboardEvent) {
 function handleKeyDown(e: KeyboardEvent) {
  // Don't add key if not holding modifier
  const isValidKeymapKey =
-    e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.key === 'Backspace' || e.key === 'Delete';
+    e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || SINGLE_WHITELIST.includes(e.key);
  if (!isValidKeymapKey) {
    return;
  }
@@ -162,7 +173,7 @@ function handleKeyDown(e: KeyboardEvent) {
  if (e.metaKey) currentKeysWithModifiers.add('Meta');
  if (e.shiftKey) currentKeysWithModifiers.add('Shift');

-  for (const [hkAction, hkKeys] of Object.entries(hotkeys) as [HotkeyAction, string[]][]) {
+  outer: for (const [hkAction, hkKeys] of Object.entries(hotkeys) as [HotkeyAction, string[]][]) {
    if (
      (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) &&
      currentKeysWithModifiers.size === 1 &&
@@ -175,24 +186,24 @@ function handleKeyDown(e: KeyboardEvent) {

    const executed: string[] = [];
    for (const { action, callback, options } of jotaiStore.get(sortedCallbacksAtom)) {
-      const enable = typeof options.enable === 'function' ? options.enable() : options.enable;
-      if (enable === false) {
+      if (hkAction !== action) {
        continue;
      }
-      if (hkAction !== action) {
+      const enable = typeof options.enable === 'function' ? options.enable() : options.enable;
+      if (enable === false) {
        continue;
      }

      for (const hkKey of hkKeys) {
        const keys = hkKey.split('+').map(resolveHotkeyKey);
-        if (
-          keys.length === currentKeysWithModifiers.size &&
-          keys.every((key) => currentKeysWithModifiers.has(key))
-        ) {
-          e.preventDefault();
-          e.stopPropagation();
+        if (compareKeys(keys, Array.from(currentKeysWithModifiers))) {
+          if (!options.allowDefault) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
          callback(e);
          executed.push(`${action} ${options.priority ?? 0}`);
+          break outer;
        }
      }
    }
@@ -258,3 +269,10 @@ const resolveHotkeyKey = (key: string) => {
  else if (key === 'CmdCtrl') return 'Control';
  else return key;
 };
+
+function compareKeys(keysA: string[], keysB: string[]) {
+  if (keysA.length !== keysB.length) return false;
+  const sortedA = keysA.map((k) => k.toLowerCase()).sort().join('::');
+  const sortedB = keysB.map((k) => k.toLowerCase()).sort().join('::');
+  return sortedA === sortedB;
+}