mirror of
https://github.com/block/buzz.git
synced 2026-11-04 00:12:02 +00:00
fix(terminal): match composer padding, remove header + drag handle, add p-2 interior
- Outer padding now px-4 pb-2 pt-1 matching the composer's inset - Removed 'Terminal' header bar and drag handle for cleaner look - Added p-2 padding inside the terminal content area - Resize still works via invisible top-edge hit zone (6px) - Removed unused onClose prop (toggle via ⌘+J only)
This commit is contained in:
@@ -180,7 +180,7 @@ export const ChannelPane = React.memo(function ChannelPane({
|
||||
const timelineScrollRef = React.useRef<HTMLDivElement>(null);
|
||||
const composerWrapperRef = React.useRef<HTMLDivElement>(null);
|
||||
useComposerHeightPadding(timelineScrollRef, composerWrapperRef);
|
||||
const { isOpen: isTerminalOpen, close: closeTerminal } = useTerminal();
|
||||
const { isOpen: isTerminalOpen } = useTerminal();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (typeof window === "undefined") {
|
||||
@@ -439,13 +439,10 @@ export const ChannelPane = React.memo(function ChannelPane({
|
||||
</div>
|
||||
</div>
|
||||
{activeChannel && isTerminalOpen ? (
|
||||
<div className="p-4 pt-2">
|
||||
<TerminalPanel
|
||||
channelId={activeChannel.id}
|
||||
isOpen={isTerminalOpen}
|
||||
onClose={closeTerminal}
|
||||
/>
|
||||
</div>
|
||||
<TerminalPanel
|
||||
channelId={activeChannel.id}
|
||||
isOpen={isTerminalOpen}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import * as React from "react";
|
||||
import { X, Minus, GripHorizontal } from "lucide-react";
|
||||
|
||||
import { TerminalInstance } from "./TerminalInstance";
|
||||
|
||||
@@ -31,14 +30,9 @@ function getInitialTerminalHeight(): number {
|
||||
type TerminalPanelProps = {
|
||||
channelId: string;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export function TerminalPanel({
|
||||
channelId,
|
||||
isOpen,
|
||||
onClose,
|
||||
}: TerminalPanelProps) {
|
||||
export function TerminalPanel({ channelId, isOpen }: TerminalPanelProps) {
|
||||
const [heightPx, setHeightPx] = React.useState(getInitialTerminalHeight);
|
||||
|
||||
// Persist height to session storage.
|
||||
@@ -53,8 +47,13 @@ export function TerminalPanel({
|
||||
}
|
||||
}, [heightPx]);
|
||||
|
||||
// Resize via pointer drag on the top edge.
|
||||
const handleResizeStart = React.useCallback(
|
||||
(event: React.PointerEvent<HTMLButtonElement>) => {
|
||||
(event: React.PointerEvent<HTMLDivElement>) => {
|
||||
// Only trigger on the top 6px of the container.
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
if (event.clientY - rect.top > 6) return;
|
||||
|
||||
event.preventDefault();
|
||||
const startY = event.clientY;
|
||||
const startHeight = heightPx;
|
||||
@@ -65,7 +64,6 @@ export function TerminalPanel({
|
||||
document.body.style.userSelect = "none";
|
||||
|
||||
const handlePointerMove = (moveEvent: PointerEvent) => {
|
||||
// Dragging up = negative deltaY = taller panel.
|
||||
const deltaY = startY - moveEvent.clientY;
|
||||
setHeightPx(clampTerminalHeight(startHeight + deltaY));
|
||||
};
|
||||
@@ -85,46 +83,14 @@ export function TerminalPanel({
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="px-3 pb-3 pt-1 sm:px-4">
|
||||
<div className="px-4 pb-2 pt-1">
|
||||
<div
|
||||
className="pointer-events-auto relative flex flex-col overflow-hidden rounded-2xl border border-border/50 shadow-[0_4px_24px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.35)]"
|
||||
style={{ height: `${heightPx}px` }}
|
||||
onPointerDown={handleResizeStart}
|
||||
>
|
||||
{/* Resize handle */}
|
||||
<button
|
||||
type="button"
|
||||
className="group absolute inset-x-0 -top-1 z-20 flex h-3 cursor-row-resize items-center justify-center"
|
||||
onPointerDown={handleResizeStart}
|
||||
aria-label="Resize terminal"
|
||||
>
|
||||
<GripHorizontal className="h-3 w-3 text-muted-foreground/40 transition-colors group-hover:text-muted-foreground" />
|
||||
</button>
|
||||
|
||||
{/* Header bar */}
|
||||
<div className="flex h-8 shrink-0 items-center justify-between border-b border-white/5 bg-[#1a1b26] px-3">
|
||||
<span className="text-xs font-medium text-[#7aa2f7]">Terminal</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded p-0.5 text-[#565f89] hover:text-[#c0caf5] transition-colors"
|
||||
onClick={onClose}
|
||||
aria-label="Minimize terminal"
|
||||
>
|
||||
<Minus className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded p-0.5 text-[#565f89] hover:text-[#c0caf5] transition-colors"
|
||||
onClick={onClose}
|
||||
aria-label="Close terminal"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Terminal content */}
|
||||
<div className="min-h-0 flex-1 bg-[#1a1b26]">
|
||||
<div className="min-h-0 flex-1 bg-[#1a1b26] p-2">
|
||||
<TerminalInstance channelId={channelId} isVisible={isOpen} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user