3550b64032
In the pinned monitoring column (embedded), the single-line entry headers wrap badly. Add compact two-line variants gated on `embedded`: - HistoryEntry: line 1 = time + client/server badge + elapsed + status; line 2 = method (and target, truncated) on the left with the controls on the right, where Replay becomes an icon (new ReplayButton element) next to Pin/Expand. - NetworkEntry: line 1 = time + HTTP method + category + elapsed + status; line 2 = the URL in a horizontal ScrollArea (new Text `nowrap` variant) with the expand toggle on the right. The full-size (non-embedded) layouts are unchanged. `embedded` is threaded from the History/Network panels into the entries. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
26 lines
701 B
TypeScript
26 lines
701 B
TypeScript
import { ActionIcon } from "@mantine/core";
|
|
import { MdReplay } from "react-icons/md";
|
|
|
|
export interface ReplayButtonProps {
|
|
/** Re-send the owning history request. */
|
|
onReplay: () => void;
|
|
}
|
|
|
|
/**
|
|
* Icon form of the "Replay" action, used in the compact (column) HistoryEntry
|
|
* layout where the text button is replaced by a replay icon sitting next to the
|
|
* pin toggle (#1616). Matches PinToggle's subtle gray icon-button styling.
|
|
*/
|
|
export function ReplayButton({ onReplay }: ReplayButtonProps) {
|
|
return (
|
|
<ActionIcon
|
|
variant="subtle"
|
|
color="gray"
|
|
size="md"
|
|
aria-label="Replay"
|
|
onClick={onReplay}
|
|
>
|
|
<MdReplay size={18} />
|
|
</ActionIcon>
|
|
);
|
|
}
|