fix: improve bottom panel collapsed state and remove broken right panel close button

- Increase collapsed bottom panel height from 40px to 48px for better proportions
- Show current state indicator in bottom panel even when collapsed
- Remove unnecessary and broken close button from right panel header

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn 2025-10-11 22:22:42 +02:00
parent bd36dd365a
commit 227b61b2a0
3 changed files with 10 additions and 20 deletions

View file

@ -38,27 +38,17 @@ interface Props {
*/
interface PanelHeaderProps {
title: string;
onClose?: () => void;
onCollapse: () => void;
}
const PanelHeader = ({ title, onClose, onCollapse }: PanelHeaderProps) => (
const PanelHeader = ({ title, onCollapse }: PanelHeaderProps) => (
<div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 bg-gray-50">
<h2 className="text-sm font-semibold text-gray-700">{title}</h2>
<div className="flex items-center space-x-1">
{onClose && (
<Tooltip title="Close (Esc)">
<IconButton size="small" onClick={onClose}>
</IconButton>
</Tooltip>
)}
<Tooltip title="Collapse Panel">
<IconButton size="small" onClick={onCollapse}>
<ChevronRightIcon fontSize="small" />
</IconButton>
</Tooltip>
</div>
<Tooltip title="Collapse Panel">
<IconButton size="small" onClick={onCollapse}>
<ChevronRightIcon fontSize="small" />
</IconButton>
</Tooltip>
</div>
);
@ -262,7 +252,7 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
className="h-full bg-white border-l border-gray-200 flex flex-col"
style={{ width: `${rightPanelWidth}px` }}
>
<PanelHeader title="Actor Properties" onClose={onClose} onCollapse={collapseRightPanel} />
<PanelHeader title="Actor Properties" onCollapse={collapseRightPanel} />
{/* Scrollable content */}
<div className="flex-1 overflow-y-auto overflow-x-hidden px-3 py-3 space-y-4">
@ -431,7 +421,7 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
className="h-full bg-white border-l border-gray-200 flex flex-col"
style={{ width: `${rightPanelWidth}px` }}
>
<PanelHeader title="Relation Properties" onClose={onClose} onCollapse={collapseRightPanel} />
<PanelHeader title="Relation Properties" onCollapse={collapseRightPanel} />
{/* Scrollable content */}
<div className="flex-1 overflow-y-auto overflow-x-hidden px-3 py-3 space-y-4">

View file

@ -95,7 +95,7 @@ const BottomPanel: React.FC = () => {
<h3 className="font-semibold text-sm">Timeline</h3>
{/* Current State Indicator */}
{currentState && !bottomPanelCollapsed && (
{currentState && (
<>
<Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
<div className="flex items-center gap-2 px-2 py-0.5 bg-blue-50 rounded border border-blue-200">

View file

@ -60,7 +60,7 @@ const MAX_RIGHT_WIDTH = 500;
const MIN_BOTTOM_HEIGHT = 150;
const MAX_BOTTOM_HEIGHT = 500;
const COLLAPSED_LEFT_WIDTH = 40;
const COLLAPSED_BOTTOM_HEIGHT = 40;
const COLLAPSED_BOTTOM_HEIGHT = 48;
export const usePanelStore = create<PanelState>()(
persist(