From 8f56505af1d0b8b14b600f93fe3931bee56968ed Mon Sep 17 00:00:00 2001
From: Md Afiq Iskandar <mdafiqiskandar@gmail.com>
Date: Mon, 28 Jul 2025 11:52:54 +0800
Subject: [PATCH] Refactor Process Builder UI for Enhanced Clarity and
 Usability

- Removed the temporary debug button from the process builder interface to streamline the user experience.
- Adjusted layout and spacing for edge and node headers to improve visual organization and readability.
- Enhanced the display of node and edge IDs with break-word support for better handling of long text.
- Updated action button icons to ensure consistent sizing and alignment across the interface.
- Improved overflow handling in scrollable content areas to prevent horizontal scrolling issues.
---
 pages/process-builder/index.vue | 74 +++++++++++++++------------------
 1 file changed, 33 insertions(+), 41 deletions(-)

diff --git a/pages/process-builder/index.vue b/pages/process-builder/index.vue
index 628b6c8..6f05526 100644
--- a/pages/process-builder/index.vue
+++ b/pages/process-builder/index.vue
@@ -2940,17 +2940,6 @@ const sendToBack = () => {
             <span class="hidden md:inline">Paste</span>
           </RsButton>
           
-          <!-- Debug button (temporary) -->
-          <RsButton 
-            @click="debugSelection" 
-            variant="tertiary" 
-            size="sm" 
-            class="ml-1"
-            title="Debug selection state"
-          >
-            <Icon name="material-symbols:bug-report" class="w-4 h-4" />
-          </RsButton>
-          
           <!-- Selection indicator -->
           <div v-if="currentSelectionInfo && !clipboardInfo" class="ml-2 px-2 py-1 bg-green-100 text-green-700 text-xs rounded-md border border-green-200 hidden sm:block" :title="`Selected: ${currentSelectionInfo}. Press Ctrl+C to copy.`">
             <Icon name="material-symbols:select-all" class="w-3 h-3 mr-1" />
@@ -3122,7 +3111,7 @@ const sendToBack = () => {
             <Icon name="material-symbols:close" class="w-4 h-4 text-gray-500" />
           </button>
         </div>
-        <div class="flex-1 overflow-y-auto">
+        <div class="flex-1 overflow-y-auto overflow-x-hidden">
           <!-- Show variable manager when no node is selected -->
           <VariableManager v-if="!selectedNodeData && !selectedEdgeData" :key="`variables-${variablesUpdateKey}`" />
           
@@ -3130,17 +3119,24 @@ const sendToBack = () => {
           <div v-else-if="selectedEdgeData" class="flex flex-col h-full">
             <!-- Edge Header -->
             <div class="p-4 border-b border-gray-200 bg-gray-50">
-              <div class="flex items-center justify-between mb-2">
+              <div class="space-y-3">
+                <!-- Row 1: Title with Icon -->
                 <div class="flex items-center space-x-2">
-                  <div class="w-8 h-8 rounded-lg flex items-center justify-center text-white text-sm font-medium bg-blue-500">
+                  <div class="w-8 h-8 rounded-lg flex items-center justify-center text-white text-sm font-medium bg-blue-500 flex-shrink-0">
                     <Icon name="material-symbols:timeline" class="w-4 h-4" />
                   </div>
-                  <div>
-                    <h3 class="text-sm font-semibold text-gray-900">Connection</h3>
-                    <p class="text-xs text-gray-500">{{ selectedEdgeData.id }}</p>
+                  <div class="min-w-0 flex-1">
+                    <h3 class="text-sm font-semibold text-gray-900 break-words">Connection</h3>
                   </div>
                 </div>
-                <div class="flex items-center gap-2">
+                
+                <!-- Row 2: Edge ID -->
+                <div class="flex items-center space-y-0">
+                  <p class="text-xs text-gray-500 break-all">{{ selectedEdgeData.id }}</p>
+                </div>
+                
+                <!-- Row 3: Action Buttons -->
+                <div class="flex items-center">
                   <RsButton
                     @click="copySelectedElements"
                     variant="secondary-text"
@@ -3149,7 +3145,7 @@ const sendToBack = () => {
                     :title="`Copy Edge (Ctrl+C)${currentSelectionInfo ? ' - ' + currentSelectionInfo : clipboardInfo ? ' - Current: ' + clipboardInfo : ''}`"
                     class="modern-icon-btn"
                   >
-                    <Icon name="material-symbols:content-copy" />
+                    <Icon name="material-symbols:content-copy" class="w-4 h-4" />
                   </RsButton>
                   <RsButton
                     @click="deleteEdge"
@@ -3159,14 +3155,14 @@ const sendToBack = () => {
                     :title="'Delete Edge'"
                     class="modern-icon-btn"
                   >
-                    <Icon name="material-symbols:delete" />
+                    <Icon name="material-symbols:delete" class="w-4 h-4" />
                   </RsButton>
                 </div>
               </div>
             </div>
 
             <!-- Edge Properties -->
-            <div class="flex-1 overflow-y-auto">
+            <div class="flex-1 overflow-y-auto overflow-x-hidden">
               <div class="p-4 space-y-4">
                 <div>
                   <h4 class="text-sm font-medium text-gray-700 mb-3 flex items-center">
@@ -3210,32 +3206,28 @@ const sendToBack = () => {
           <div v-else class="flex flex-col h-full">
             <!-- Node/Shape Header -->
             <div class="p-4 border-b border-gray-200 bg-gray-50">
-              <div class="flex items-center justify-between mb-2">
+              <div class="space-y-1">
+                <!-- Row 1: Title with Icon -->
                 <div class="flex items-center space-x-2">
-                  <div class="w-8 h-8 rounded-lg flex items-center justify-center text-white text-sm font-medium"
+                  <div class="w-8 h-8 rounded-lg flex items-center justify-center text-white text-sm font-medium flex-shrink-0"
                        :style="{ backgroundColor: nodeBorderColor }">
                     <Icon :name="`material-symbols:${getNodeIcon(selectedNodeData.type)}`" 
                           class="w-4 h-4" />
                   </div>
-                  <div>
-                    <h3 class="text-sm font-semibold text-gray-900 capitalize">
+                  <div class="min-w-0 flex-1">
+                    <h3 class="text-sm font-semibold text-gray-900 capitalize break-words">
                       {{ selectedNodeData.data?.isShape ? 'Shape' : 'Node' }}: {{ selectedNodeData.type.replace('-', ' ') }}
                     </h3>
-                    <p class="text-xs text-gray-500">{{ selectedNodeData.id }}</p>
                   </div>
                 </div>
+                
+                <!-- Row 2: Node ID -->
+                <div class="flex items-center">
+                  <p class="text-xs text-gray-500 break-all">{{ selectedNodeData.id }}</p>
+                </div>
+                
+                <!-- Row 3: Action Buttons -->
                 <div v-if="canShowNodeActions" class="flex items-center gap-2">
-                  <RsButton
-                    @click="copySelectedElements"
-                    variant="secondary-text"
-                    size="sm"
-                    icon
-                    :disabled="!canCopy"
-                    :title="`Copy Node (Ctrl+C)${currentSelectionInfo ? ' - ' + currentSelectionInfo : clipboardInfo ? ' - Current: ' + clipboardInfo : ''}`"
-                    class="modern-icon-btn"
-                  >
-                    <Icon name="material-symbols:content-copy" />
-                  </RsButton>
                   <RsButton
                     @click="duplicateNode"
                     variant="secondary-text"
@@ -3244,7 +3236,7 @@ const sendToBack = () => {
                     :title="'Duplicate Node'"
                     class="modern-icon-btn"
                   >
-                    <Icon name="material-symbols:content-copy-outline" />
+                    <Icon name="material-symbols:content-copy-outline" class="w-5 h-5" />
                   </RsButton>
                   <RsButton
                     @click="deleteNode"
@@ -3254,18 +3246,18 @@ const sendToBack = () => {
                     :title="'Delete Node'"
                     class="modern-icon-btn"
                   >
-                    <Icon name="material-symbols:delete" />
+                    <Icon name="material-symbols:delete" class="w-5 h-5" />
                   </RsButton>
                 </div>
               </div>
             </div>
 
             <!-- Scrollable Content -->
-            <div class="flex-1 overflow-y-auto">
+            <div class="flex-1 overflow-y-auto overflow-x-hidden">
               <!-- Basic Properties Section -->
               <div class="p-4 space-y-4">
                 <div>
-                  <h4 class="text-sm font-medium text-gray-700 mb-3 flex items-center">
+                  <h4 v-if="!selectedNodeData.data?.isShape || selectedNodeData.type === 'text-annotation'" class="text-sm font-medium text-gray-700 mb-3 flex items-center">
                     <Icon name="material-symbols:edit" class="w-4 h-4 mr-2" />
                     Basic Properties
                   </h4>