Keep sidebar and cmd+p items in view

src-web/components/CommandPalette.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { search } from 'fast-fuzzy';
 import type { KeyboardEvent, ReactNode } from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
 import { useActiveCookieJar } from '../hooks/useActiveCookieJar';
 import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
 import { useActiveRequest } from '../hooks/useActiveRequest';
@@ -23,6 +23,7 @@ import { useRecentRequests } from '../hooks/useRecentRequests';
 import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
 import { useRenameRequest } from '../hooks/useRenameRequest';
 import { useRequests } from '../hooks/useRequests';
+import { useScrollIntoView } from '../hooks/useScrollIntoView';
 import { useSendAnyHttpRequest } from '../hooks/useSendAnyHttpRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { useWorkspaces } from '../hooks/useWorkspaces';
@@ -445,8 +446,12 @@ function CommandPaletteItem({
   onClick: () => void;
   rightSlot?: ReactNode;
 }) {
+  const ref = useRef<HTMLButtonElement | null>(null);
+  useScrollIntoView(ref.current, active);
+
   return (
     <Button
+      ref={ref}
       onClick={onClick}
       tabIndex={active ? undefined : -1}
       rightSlot={rightSlot}

src-web/components/Sidebar.tsx

@@ -25,6 +25,7 @@ import { useMoveToWorkspace } from '../hooks/useMoveToWorkspace';
 import { usePrompt } from '../hooks/usePrompt';
 import { useRenameRequest } from '../hooks/useRenameRequest';
 import { useRequests } from '../hooks/useRequests';
+import { useScrollIntoView } from '../hooks/useScrollIntoView';
 import { useSendAnyHttpRequest } from '../hooks/useSendAnyHttpRequest';
 import { useSendManyRequests } from '../hooks/useSendFolder';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
@@ -578,8 +579,7 @@ type SidebarItemProps = {
   itemModel: string;
   itemPrefix: ReactNode;
   useProminentStyles?: boolean;
-  selected?: boolean;
+  selected: boolean;
-  draggable?: boolean;
   onMove: (id: string, side: 'above' | 'below') => void;
   onEnd: (id: string) => void;
   onDragStart: (id: string) => void;
@@ -610,6 +610,7 @@ function SidebarItem({
   children,
 }: SidebarItemProps) {
   const ref = useRef<HTMLLIElement>(null);
+  useScrollIntoView(ref.current, selected);
 
   const [, connectDrop] = useDrop<DragItem, void>(
     {

src-web/hooks/useScrollIntoView.ts

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+export function useScrollIntoView<T extends HTMLElement>(node: T | null, active: boolean) {
+  useEffect(() => {
+    if (active) {
+      node?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+  }, [active, node]);
+}