From 795aaae2f560bd38c017678e971c0aaa41ceaf31 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 15 Aug 2024 05:50:38 -0700
Subject: [PATCH] Keep sidebar and cmd+p items in view

---
 src-web/components/CommandPalette.tsx | 7 ++++++-
 src-web/components/Sidebar.tsx        | 5 +++--
 src-web/hooks/useScrollIntoView.ts    | 9 +++++++++
 3 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src-web/hooks/useScrollIntoView.ts

diff --git a/src-web/components/CommandPalette.tsx b/src-web/components/CommandPalette.tsx
index 89ba1fa4..4886cb4d 100644
--- a/src-web/components/CommandPalette.tsx
+++ b/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}
diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx
index 631b734b..4e9c6074 100644
--- a/src-web/components/Sidebar.tsx
+++ b/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;
-  draggable?: boolean;
+  selected: 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>(
     {
diff --git a/src-web/hooks/useScrollIntoView.ts b/src-web/hooks/useScrollIntoView.ts
new file mode 100644
index 00000000..204bb410
--- /dev/null
+++ b/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]);
+}