daf736c6e7
Render PinColumnButton as a subtle size-sm Button with a size-20 icon, the same style as the panel's ListToggle, instead of a default ActionIcon. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
27 lines
898 B
TypeScript
27 lines
898 B
TypeScript
import { Button } from "@mantine/core";
|
|
import { TbLayoutSidebarRightExpand } from "react-icons/tb";
|
|
|
|
export interface PinColumnButtonProps {
|
|
/** Pin this screen into the monitoring column to the right. */
|
|
onPin: () => void;
|
|
}
|
|
|
|
/**
|
|
* Toolbar button that pins the owning monitor screen (Logs / History / Network)
|
|
* into the resizable column on the right of the InspectorView (#1616). Distinct
|
|
* from `PinToggle` (which pins individual history entries) — this one opens a
|
|
* side column, so it uses a right-sidebar glyph and an "as column" label. Styled
|
|
* to match the panel's expand/collapse `ListToggle` (subtle icon button).
|
|
*/
|
|
export function PinColumnButton({ onPin }: PinColumnButtonProps) {
|
|
return (
|
|
<Button
|
|
size="sm"
|
|
variant="subtle"
|
|
aria-label="Pin as column"
|
|
onClick={onPin}
|
|
>
|
|
<TbLayoutSidebarRightExpand size={20} />
|
|
</Button>
|
|
);
|
|
}
|