Add context menu support and Vim keybindings in Sidebar and Tree components

src-web/components/Sidebar.tsx

@@ -104,7 +104,7 @@ function Sidebar({ className }: { className?: string }) {
     }
 
     // Select the 0th index on focus if none selected
-    focusActiveItem();
+    setTimeout(focusActiveItem, 100);
   });
 
   const handleDragEnd = useCallback(async function handleDragEnd({
@@ -360,6 +360,12 @@ const sidebarTreeAtom = atom<TreeNode<SidebarModel> | null>((get) => {
 });
 
 const actions = {
+  'sidebar.context_menu': {
+    enable: isSidebarFocused,
+    cb: async function (tree: TreeHandle) {
+      tree.showContextMenu();
+    },
+  },
   'sidebar.selected.delete': {
     enable: isSidebarFocused,
     cb: async function (_: TreeHandle, items: SidebarModel[]) {

src-web/components/core/tree/Tree.tsx

@@ -76,9 +76,11 @@ export interface TreeProps<T extends { id: string }> {
 }
 
 export interface TreeHandle {
+  treeId: string;
   focus: () => void;
   selectItem: (id: string) => void;
   renameItem: (id: string) => void;
+  showContextMenu: () => void;
 }
 
 function TreeInner<T extends { id: string }>(
@@ -132,14 +134,24 @@ function TreeInner<T extends { id: string }>(
 
   const treeHandle = useMemo<TreeHandle>(
     () => ({
+      treeId,
       focus: tryFocus,
       renameItem: (id) => treeItemRefs.current[id]?.rename(),
       selectItem: (id) => {
         setSelected([id], false);
         jotaiStore.set(focusIdsFamily(treeId), { anchorId: id, lastId: id });
       },
+      showContextMenu: async () => {
+        if (getContextMenu == null) return;
+        const items = getSelectedItems(treeId, selectableItems);
+        const menuItems = await getContextMenu(treeHandle, items);
+        const lastSelectedId = jotaiStore.get(focusIdsFamily(treeId)).lastId;
+        const rect = lastSelectedId ? treeItemRefs.current[lastSelectedId]?.rect() : null;
+        if (rect == null) return;
+        setShowContextMenu({ items: menuItems, x: rect.x, y: rect.y });
+      },
     }),
-    [setSelected, treeId, tryFocus],
+    [getContextMenu, selectableItems, setSelected, treeId, tryFocus],
   );
 
   useImperativeHandle(ref, (): TreeHandle => treeHandle, [treeHandle]);
@@ -268,7 +280,7 @@ function TreeInner<T extends { id: string }>(
   );
 
   useKey(
-    'ArrowUp',
+    (e) => e.key === 'ArrowUp' || e.key.toLowerCase() === 'k',
     (e) => {
       if (!isSidebarFocused()) return;
       e.preventDefault();
@@ -279,7 +291,7 @@ function TreeInner<T extends { id: string }>(
   );
 
   useKey(
-    'ArrowDown',
+    (e) => e.key === 'ArrowDown' || e.key.toLowerCase() === 'j',
     (e) => {
       if (!isSidebarFocused()) return;
       e.preventDefault();
@@ -291,7 +303,7 @@ function TreeInner<T extends { id: string }>(
 
   // If the selected item is a collapsed folder, expand it. Otherwise, select next item
   useKey(
-    'ArrowRight',
+    (e) => e.key === 'ArrowRight' || e.key.toLowerCase() === 'l',
     (e) => {
       if (!isSidebarFocused()) return;
       e.preventDefault();
@@ -317,7 +329,7 @@ function TreeInner<T extends { id: string }>(
   // If the selected item is in a folder, select its parent.
   // If the selected item is an expanded folder, collapse it.
   useKey(
-    'ArrowLeft',
+    (e) => e.key === 'ArrowLeft' || e.key.toLowerCase() === 'h',
     (e) => {
       if (!isSidebarFocused()) return;
       e.preventDefault();

src-web/components/core/tree/TreeItem.tsx

@@ -37,6 +37,7 @@ export type TreeItemProps<T extends { id: string }> = Pick<
 export interface TreeItemHandle {
   rename: () => void;
   isRenaming: boolean;
+  rect: () => DOMRect;
 }
 
 const HOVER_CLOSED_FOLDER_DELAY = 800;
@@ -70,6 +71,12 @@ function TreeItem_<T extends { id: string }>({
         }
       },
       isRenaming: editing,
+      rect: () => {
+        if (listItemRef.current == null) {
+          return new DOMRect(0, 0, 0, 0);
+        }
+        return listItemRef.current.getBoundingClientRect();
+      },
     });
   }, [addRef, editing, getEditOptions, node.item]);
 
@@ -225,7 +232,7 @@ function TreeItem_<T extends { id: string }>({
       e.preventDefault();
       e.stopPropagation();
       const items = await getContextMenu(node.item);
-      setShowContextMenu({ items, x: e.clientX, y: e.clientY });
+      setShowContextMenu({ items, x: e.clientX ?? 100, y: e.clientY ?? 100 });
     },
     [getContextMenu, node.item],
   );