From bc8ab6c9c7d30e1d9f0156135967eac137eda54f Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Fri, 17 Oct 2025 10:50:01 +0200
Subject: [PATCH] feat: add label management button to property panels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add quick access edit button next to "Labels" field in both Node Editor
and Edge Editor panels, matching the existing pattern for Actor Type and
Relation Type edit buttons.

Changes:
- Add small edit icon button next to Labels field
- Opens LabelConfigModal for managing label definitions
- Consistent UX with existing type configuration buttons
- Available in both NodeEditorPanel and EdgeEditorPanel

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/Panels/EdgeEditorPanel.tsx | 25 ++++++++++++++++++++---
 src/components/Panels/NodeEditorPanel.tsx | 25 ++++++++++++++++++++---
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/components/Panels/EdgeEditorPanel.tsx b/src/components/Panels/EdgeEditorPanel.tsx
index a5835bd..78d0cb8 100644
--- a/src/components/Panels/EdgeEditorPanel.tsx
+++ b/src/components/Panels/EdgeEditorPanel.tsx
@@ -11,6 +11,7 @@ import { useDocumentHistory } from '../../hooks/useDocumentHistory';
 import { useConfirm } from '../../hooks/useConfirm';
 import ConnectionDisplay from '../Common/ConnectionDisplay';
 import EdgeTypeConfigModal from '../Config/EdgeTypeConfig';
+import LabelConfigModal from '../Config/LabelConfig';
 import AutocompleteLabelSelector from '../Common/AutocompleteLabelSelector';
 import type { Relation, EdgeDirectionality } from '../../types';
 
@@ -37,6 +38,9 @@ const EdgeEditorPanel = ({ selectedEdge, onClose }: EdgeEditorPanelProps) => {
   const [showRelationTypeModal, setShowRelationTypeModal] = useState(false);
   const [editingRelationTypeId, setEditingRelationTypeId] = useState<string | null>(null);
 
+  // Label modal state
+  const [showLabelModal, setShowLabelModal] = useState(false);
+
   // Update state when selected edge changes
   useEffect(() => {
     if (selectedEdge.data) {
@@ -218,9 +222,20 @@ const EdgeEditorPanel = ({ selectedEdge, onClose }: EdgeEditorPanelProps) => {
 
         {/* Labels */}
         <div>
-          <label className="block text-xs font-medium text-gray-700 mb-1">
-            Labels (optional)
-          </label>
+          <div className="flex items-center justify-between mb-1">
+            <label className="block text-xs font-medium text-gray-700">
+              Labels (optional)
+            </label>
+            <Tooltip title="Manage Labels">
+              <IconButton
+                size="small"
+                onClick={() => setShowLabelModal(true)}
+                sx={{ padding: '2px' }}
+              >
+                <EditIcon sx={{ fontSize: 14 }} />
+              </IconButton>
+            </Tooltip>
+          </div>
           <AutocompleteLabelSelector
             value={relationLabels}
             onChange={(newLabels) => {
@@ -326,6 +341,10 @@ const EdgeEditorPanel = ({ selectedEdge, onClose }: EdgeEditorPanelProps) => {
         onClose={handleCloseRelationTypeModal}
         initialEditingTypeId={editingRelationTypeId}
       />
+      <LabelConfigModal
+        isOpen={showLabelModal}
+        onClose={() => setShowLabelModal(false)}
+      />
     </>
   );
 };
diff --git a/src/components/Panels/NodeEditorPanel.tsx b/src/components/Panels/NodeEditorPanel.tsx
index 1c1cee0..46d28a3 100644
--- a/src/components/Panels/NodeEditorPanel.tsx
+++ b/src/components/Panels/NodeEditorPanel.tsx
@@ -6,6 +6,7 @@ import { useGraphWithHistory } from '../../hooks/useGraphWithHistory';
 import { useConfirm } from '../../hooks/useConfirm';
 import ConnectionDisplay from '../Common/ConnectionDisplay';
 import NodeTypeConfigModal from '../Config/NodeTypeConfig';
+import LabelConfigModal from '../Config/LabelConfig';
 import AutocompleteLabelSelector from '../Common/AutocompleteLabelSelector';
 import type { Actor } from '../../types';
 
@@ -32,6 +33,9 @@ const NodeEditorPanel = ({ selectedNode, onClose }: NodeEditorPanelProps) => {
   const [showActorTypeModal, setShowActorTypeModal] = useState(false);
   const [editingActorTypeId, setEditingActorTypeId] = useState<string | null>(null);
 
+  // Label modal state
+  const [showLabelModal, setShowLabelModal] = useState(false);
+
   // Update state when selected node changes
   useEffect(() => {
     setActorType(selectedNode.data?.type || '');
@@ -204,9 +208,20 @@ const NodeEditorPanel = ({ selectedNode, onClose }: NodeEditorPanelProps) => {
 
         {/* Labels */}
         <div>
-          <label className="block text-xs font-medium text-gray-700 mb-1">
-            Labels (optional)
-          </label>
+          <div className="flex items-center justify-between mb-1">
+            <label className="block text-xs font-medium text-gray-700">
+              Labels (optional)
+            </label>
+            <Tooltip title="Manage Labels">
+              <IconButton
+                size="small"
+                onClick={() => setShowLabelModal(true)}
+                sx={{ padding: '2px' }}
+              >
+                <EditIcon sx={{ fontSize: 14 }} />
+              </IconButton>
+            </Tooltip>
+          </div>
           <AutocompleteLabelSelector
             value={actorLabels}
             onChange={(newLabels) => {
@@ -295,6 +310,10 @@ const NodeEditorPanel = ({ selectedNode, onClose }: NodeEditorPanelProps) => {
         onClose={handleCloseActorTypeModal}
         initialEditingTypeId={editingActorTypeId}
       />
+      <LabelConfigModal
+        isOpen={showLabelModal}
+        onClose={() => setShowLabelModal(false)}
+      />
     </>
   );
 };