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:
Taylor Ho
2026-05-21 22:42:34 -07:00
parent f8f42d83ee
commit 3f763c2cd2
2 changed files with 15 additions and 52 deletions

View File

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

View File

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