mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-01-15 05:33:29 +01:00
ae2f2459e9
- Separate selected item from panel open state (closing panel keeps selection) - Scroll selected item into view when detail panel opens - Enter/Space opens detail panel, Escape closes it - Remove browser focus outline on scroll container - Add prefix prop to EventDetailHeader for labels - Make timestamp optional in EventViewerRow - Add close button to EventDetailHeader - Fix title truncation with min-w-0 - Consolidate HttpResponseTimeline title generation - Add ID/event labels to SSE detail header - Remove fake timestamp from SSE events Closes https://feedback.yaak.app/p/feedback-on-sse-viewer-ux-in-yaak
39 lines
1020 B
TypeScript
39 lines
1020 B
TypeScript
import classNames from 'classnames';
|
|
import { format } from 'date-fns';
|
|
import type { ReactNode } from 'react';
|
|
|
|
interface EventViewerRowProps {
|
|
isActive: boolean;
|
|
onClick: () => void;
|
|
icon: ReactNode;
|
|
content: ReactNode;
|
|
timestamp?: string;
|
|
}
|
|
|
|
export function EventViewerRow({
|
|
isActive,
|
|
onClick,
|
|
icon,
|
|
content,
|
|
timestamp,
|
|
}: EventViewerRowProps) {
|
|
return (
|
|
<div className="px-1">
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={classNames(
|
|
'w-full grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2 items-center text-left',
|
|
'px-1.5 h-xs font-mono text-editor cursor-default group focus:outline-none focus:text-text rounded',
|
|
isActive && 'bg-surface-active !text-text',
|
|
'text-text-subtle hover:text',
|
|
)}
|
|
>
|
|
{icon}
|
|
<div className="w-full truncate">{content}</div>
|
|
{timestamp && <div className="opacity-50">{format(`${timestamp}Z`, 'HH:mm:ss.SSS')}</div>}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|