68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import { memo, useState } from 'react';
|
|
|
|
import { ClaudeLogsSection } from '../ClaudeLogsSection';
|
|
import { MessagesPanel } from '../messages/MessagesPanel';
|
|
|
|
import type { MouseEventHandler } from 'react';
|
|
import type { ComponentProps } from 'react';
|
|
|
|
type SharedMessagesPanelProps = Omit<ComponentProps<typeof MessagesPanel>, 'position'>;
|
|
|
|
interface TeamSidebarRailProps {
|
|
teamName: string;
|
|
messagesPanelProps: SharedMessagesPanelProps;
|
|
isResizing: boolean;
|
|
onResizeMouseDown: MouseEventHandler<HTMLDivElement>;
|
|
logsHeight: number;
|
|
isLogsResizing: boolean;
|
|
onLogsResizeMouseDown: MouseEventHandler<HTMLDivElement>;
|
|
}
|
|
|
|
export const TeamSidebarRail = memo(function TeamSidebarRail({
|
|
teamName,
|
|
messagesPanelProps,
|
|
isResizing,
|
|
onResizeMouseDown,
|
|
logsHeight,
|
|
isLogsResizing,
|
|
onLogsResizeMouseDown,
|
|
}: TeamSidebarRailProps): React.JSX.Element {
|
|
const [logsOpen, setLogsOpen] = useState(false);
|
|
const logsSeparator = logsOpen ? (
|
|
<div
|
|
className={`group relative h-3 shrink-0 cursor-row-resize ${isLogsResizing ? 'bg-blue-500/10' : ''}`}
|
|
onMouseDown={onLogsResizeMouseDown}
|
|
>
|
|
<div
|
|
className={`absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 transition-colors ${
|
|
isLogsResizing
|
|
? 'bg-blue-500'
|
|
: 'bg-[var(--color-text-muted)]/35 group-hover:bg-blue-500/90'
|
|
}`}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="bg-[var(--color-text-muted)]/35 h-px shrink-0" />
|
|
);
|
|
|
|
return (
|
|
<div className="flex size-full min-h-0 flex-col overflow-hidden bg-[var(--color-surface)]">
|
|
<div className="shrink-0 overflow-hidden px-3">
|
|
<ClaudeLogsSection
|
|
teamName={teamName}
|
|
position="sidebar"
|
|
sidebarViewerMaxHeight={logsHeight}
|
|
onOpenChange={setLogsOpen}
|
|
/>
|
|
</div>
|
|
{logsSeparator}
|
|
<div className="min-h-0 flex-1">
|
|
<MessagesPanel position="sidebar" {...messagesPanelProps} />
|
|
</div>
|
|
<div
|
|
className={`absolute inset-y-0 right-0 z-20 w-1 cursor-col-resize transition-colors hover:bg-blue-500/30 ${isResizing ? 'bg-blue-500/40' : ''}`}
|
|
onMouseDown={onResizeMouseDown}
|
|
/>
|
|
</div>
|
|
);
|
|
});
|