From d03be6886097ff78bcf0b5d3773314d90f2d8efb Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Mon, 20 Oct 2025 15:07:54 +0200
Subject: [PATCH] fix: update group minimize/maximize button label in real-time
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The group property panel's minimize/maximize button label was not
updating after clicking because it relied on the selectedGroup prop
passed from the parent, which was set once on selection and never
updated when the group's minimized state changed in the store.

Changes:
- Added currentGroup lookup from the store's groups array
- Use currentGroup (from store) for minimized state checks
- Button label now reflects the actual current state

This ensures the button always shows the correct action based on
the group's actual minimized state in the store, not the stale
prop value.

Fixes the issue where clicking "Minimize Group" would minimize the
group visually but the button would still say "Minimize Group"
instead of changing to "Maximize Group".

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/Panels/GroupEditorPanel.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Panels/GroupEditorPanel.tsx b/src/components/Panels/GroupEditorPanel.tsx
index d99ab24..f49e7d2 100644
--- a/src/components/Panels/GroupEditorPanel.tsx
+++ b/src/components/Panels/GroupEditorPanel.tsx
@@ -39,6 +39,9 @@ const GroupEditorPanel = ({ selectedGroup, onClose }: Props) => {
   const { confirm, ConfirmDialogComponent } = useConfirm();
   const reactFlowNodes = useNodes();
 
+  // Get the current group from store to ensure we have the latest state
+  const currentGroup = groups.find(g => g.id === selectedGroup.id) || selectedGroup;
+
   const [label, setLabel] = useState(selectedGroup.data.label);
   const [description, setDescription] = useState(selectedGroup.data.description || '');
   const [color, setColor] = useState(selectedGroup.data.color);
@@ -245,12 +248,12 @@ const GroupEditorPanel = ({ selectedGroup, onClose }: Props) => {
         <button
           onClick={() => {
             // Sync current React Flow dimensions before toggling
-            if (!selectedGroup.data.minimized) {
+            if (!currentGroup.data.minimized) {
               // When minimizing, update the store with current dimensions first
-              const currentNode = reactFlowNodes.find((n) => n.id === selectedGroup.id);
+              const currentNode = reactFlowNodes.find((n) => n.id === currentGroup.id);
               if (currentNode && currentNode.width && currentNode.height) {
                 setGroups(groups.map((g) =>
-                  g.id === selectedGroup.id
+                  g.id === currentGroup.id
                     ? { ...g, width: currentNode.width, height: currentNode.height }
                     : g
                 ));
@@ -258,12 +261,12 @@ const GroupEditorPanel = ({ selectedGroup, onClose }: Props) => {
             }
             // Use setTimeout to ensure store update completes before toggle
             setTimeout(() => {
-              toggleGroupMinimized(selectedGroup.id);
+              toggleGroupMinimized(currentGroup.id);
             }, 0);
           }}
           className="w-full px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50 rounded hover:bg-gray-100 transition-colors flex items-center justify-center space-x-2"
         >
-          {selectedGroup.data.minimized ? (
+          {currentGroup.data.minimized ? (
             <>
               <MaximizeIcon fontSize="small" />
               <span>Maximize Group</span>