Keep sidebar and cmd+p items in view

This commit is contained in:
Gregory Schier
2024-08-15 05:50:38 -07:00
parent 522d293087
commit 795aaae2f5
3 changed files with 18 additions and 3 deletions

View File

@@ -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}

View File

@@ -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>(
{