refactor(devti): enhance UI visuals and consistency #352

phodal · phodal · commit 4c7248718cf6 · 2025-03-28T20:12:11.000+08:00
- Update colors and icons for improved visual consistency
- Refactor UI components to use new color constants- Adjust layout and spacing for better readability
- Replace text labels with icons for Execute and Retry actions
- Add new check icon for completed tasks
diff --git a/core/src/main/kotlin/cc/unitmesh/devti/AutoDevIcons.kt b/core/src/main/kotlin/cc/unitmesh/devti/AutoDevIcons.kt
@@ -36,7 +36,7 @@ object AutoDevIcons {
     val Checked: Icon = IconLoader.getIcon("/icons/checked.svg", AutoDevIcons::class.java)
 
     @JvmField
-    val Repair: Icon = IconLoader.getIcon("/icons/repair.svg", AutoDevIcons::class.java)
+    val REPAIR: Icon = IconLoader.getIcon("/icons/repair.svg", AutoDevIcons::class.java)
 
     @JvmField
     val Build: Icon = IconLoader.getIcon("/icons/build.svg", AutoDevIcons::class.java)
@@ -79,4 +79,7 @@ object AutoDevIcons {
 
     @JvmField
     val MCP: Icon = IconLoader.getIcon("/icons/mcp.svg", AutoDevIcons::class.java)
+
+    @JvmField
+    val CHECK: Icon = IconLoader.getIcon("/icons/check.svg", AutoDevIcons::class.java)
 }
diff --git a/core/src/main/kotlin/cc/unitmesh/devti/sketch/ui/AutoDevColors.kt b/core/src/main/kotlin/cc/unitmesh/devti/sketch/ui/AutoDevColors.kt
@@ -0,0 +1,23 @@
+package cc.unitmesh.devti.sketch.ui
+
+import com.intellij.ui.JBColor
+
+/**
+ * Color constants used throughout the AutoDev UI
+ */
+object AutoDevColors {
+    // Status colors
+    val COMPLETED_STATUS = JBColor(0x59A869, 0x59A869) // Green
+    val FAILED_STATUS = JBColor(0xD94F4F, 0xD94F4F) // Red
+    val IN_PROGRESS_STATUS = JBColor(0x3592C4, 0x3592C4) // Blue
+    val TODO_STATUS = JBColor(0x808080, 0x808080) // Gray
+
+    // Text colors
+    val COMPLETED_TEXT = JBColor(0x808080, 0x999999)
+    val FAILED_TEXT = JBColor(0xD94F4F, 0xFF6B68)
+    val IN_PROGRESS_TEXT = JBColor(0x3592C4, 0x589DF6)
+    
+    // UI elements
+    val SEPARATOR_BORDER = JBColor(0xE5E5E5, 0x323232)
+    val LINK_COLOR = JBColor(0x3366CC, 0x589DF6)
+}
diff --git a/core/src/main/kotlin/cc/unitmesh/devti/sketch/ui/patch/SingleFileDiffSketch.kt b/core/src/main/kotlin/cc/unitmesh/devti/sketch/ui/patch/SingleFileDiffSketch.kt
@@ -7,8 +7,6 @@ import cc.unitmesh.devti.sketch.AutoSketchMode
 import cc.unitmesh.devti.sketch.lint.SketchCodeInspection
 import cc.unitmesh.devti.sketch.ui.LangSketch
 import cc.unitmesh.devti.template.context.TemplateContext
-import cc.unitmesh.devti.util.AutoDevAppScope
-import cc.unitmesh.devti.util.AutoDevCoroutineScope
 import com.intellij.diff.editor.DiffVirtualFileBase
 import com.intellij.lang.annotation.HighlightSeverity
 import com.intellij.openapi.application.*
@@ -28,14 +26,12 @@ import com.intellij.openapi.vfs.VfsUtilCore
 import com.intellij.openapi.vfs.VirtualFile
 import com.intellij.psi.PsiManager
 import com.intellij.testFramework.LightVirtualFile
-import com.intellij.ui.DarculaColors
 import com.intellij.ui.JBColor
 import com.intellij.ui.components.JBLabel
 import com.intellij.ui.components.panels.HorizontalLayout
 import com.intellij.ui.components.panels.VerticalLayout
 import com.intellij.util.LocalTimeCounter
 import com.intellij.util.concurrency.annotations.RequiresWriteLock
-import kotlinx.coroutines.launch
 import java.awt.BorderLayout
 import java.awt.event.MouseAdapter
 import java.awt.event.MouseEvent
@@ -214,7 +210,7 @@ class SingleFileDiffSketch(
             icon = if (isAutoRepair && isFailedPatch) {
                 AutoDevIcons.InProgress
             } else {
-                AutoDevIcons.Repair
+                AutoDevIcons.REPAIR
             }
 
             toolTipText = AutoDevBundle.message("sketch.patch.action.repairDiff.tooltip")
diff --git a/core/src/main/kotlin/cc/unitmesh/devti/sketch/ui/plan/TaskSectionPanel.kt b/core/src/main/kotlin/cc/unitmesh/devti/sketch/ui/plan/TaskSectionPanel.kt
@@ -6,20 +6,16 @@ import cc.unitmesh.devti.gui.AutoDevToolWindowFactory
 import cc.unitmesh.devti.gui.chat.message.ChatActionType
 import cc.unitmesh.devti.observer.plan.AgentTaskEntry
 import cc.unitmesh.devti.observer.plan.TaskStatus
+import cc.unitmesh.devti.sketch.ui.AutoDevColors
 import com.intellij.openapi.project.Project
 import com.intellij.ui.JBColor
 import com.intellij.ui.components.JBPanel
 import com.intellij.ui.components.JBScrollPane
-import com.intellij.util.ui.AnimatedIcon
 import com.intellij.util.ui.JBUI
-import com.intellij.util.ui.UIUtil
 import java.awt.BorderLayout
 import java.awt.Dimension
 import java.awt.FlowLayout
 import java.awt.Font
-import java.awt.event.ActionEvent
-import java.awt.event.ComponentAdapter
-import java.awt.event.ComponentEvent
 import javax.swing.*
 import javax.swing.border.CompoundBorder
 
@@ -37,7 +33,6 @@ class TaskSectionPanel(
     private var isExpanded = true
     private var expandButton: JButton? = null
     private var statusLabel: JLabel? = null
-    private var progressLabel: JLabel? = null
     private val scrollPane: JBScrollPane
     private val MAX_TITLE_LENGTH = 50
     
@@ -54,7 +49,7 @@ class TaskSectionPanel(
         
         stepsPanel.layout = BoxLayout(stepsPanel, BoxLayout.Y_AXIS)
         stepsPanel.background = JBUI.CurrentTheme.ToolWindow.background()
-        stepsPanel.border = JBUI.Borders.emptyLeft(24)
+        stepsPanel.border = JBUI.Borders.emptyLeft(4)
         
         refreshStepsPanel()
         
@@ -67,8 +62,6 @@ class TaskSectionPanel(
         }
         
         add(scrollPane, BorderLayout.CENTER)
-        
-        // Initially show or hide based on state
         toggleStepsVisibility(isExpanded)
     }
     
@@ -78,15 +71,13 @@ class TaskSectionPanel(
             border = JBUI.Borders.empty(2)
         }
         
-        // Left side with expand button and title
         val leftPanel = JPanel(FlowLayout(FlowLayout.LEFT, 5, 0)).apply {
             isOpaque = false
         }
         
-        // Expand/collapse button
         expandButton = JButton(if (isExpanded) "▼" else "▶").apply {
-            preferredSize = Dimension(20, 20)  // Slightly smaller button
-            margin = JBUI.insets(0)
+            preferredSize = Dimension(20, 20)
+            margin = JBUI.emptyInsets()
             isBorderPainted = false
             isContentAreaFilled = false
             toolTipText = if (isExpanded) "Collapse section" else "Expand section"
@@ -119,40 +110,40 @@ class TaskSectionPanel(
         
         val titleLabel = JLabel(displayTitle).apply {
             font = font.deriveFont(Font.BOLD)
-            toolTipText = fullTitle // Show full title on hover
+            toolTipText = fullTitle
         }
         leftPanel.add(titleLabel)
         
         val rightPanel = JPanel(FlowLayout(FlowLayout.RIGHT, 5, 0)).apply {
             isOpaque = false
         }
         
-        val completedSteps = planItem.steps.count { it.completed }
-        val totalSteps = planItem.steps.size
-        val progressPercentage = if (totalSteps > 0) (completedSteps * 100) / totalSteps else 0
-        
-        progressLabel = JLabel("$progressPercentage% complete").apply {
-            foreground = JBColor.GRAY
-            font = font.deriveFont(Font.PLAIN, 10f)
-        }
-        rightPanel.add(progressLabel)
-        
         statusLabel = JLabel(getStatusText(planItem.status)).apply {
             foreground = getStatusColor(planItem.status)
             font = font.deriveFont(Font.BOLD, 11f)
-            border = JBUI.Borders.empty(2, 5)
+            border = JBUI.Borders.empty(2)
+            preferredSize = Dimension(80, 16)
         }
+
         rightPanel.add(statusLabel)
         
         if (planItem.status == TaskStatus.TODO || planItem.status == TaskStatus.FAILED) {
-            val executeButton = JButton("Execute").apply {
+            val executeButton = JButton(AutoDevIcons.Run).apply {
+                margin = JBUI.emptyInsets()
+                isBorderPainted = false
+                isContentAreaFilled = false
+                preferredSize = Dimension(20, 20)
                 addActionListener { executeSection() }
             }
             rightPanel.add(executeButton)
         }
         
         if (planItem.status == TaskStatus.FAILED) {
-            val retryButton = JButton("Retry").apply {
+            val retryButton = JButton(AutoDevIcons.REPAIR).apply {
+                margin = JBUI.emptyInsets()
+                isBorderPainted = false
+                isContentAreaFilled = false
+                preferredSize = Dimension(20, 20)
                 addActionListener { executeSection() }
             }
             rightPanel.add(retryButton)
@@ -207,12 +198,6 @@ class TaskSectionPanel(
     }
     
     private fun updateProgressAndStatus() {
-        val completedSteps = planItem.steps.count { it.completed }
-        val totalSteps = planItem.steps.size
-        val progressPercentage = if (totalSteps > 0) (completedSteps * 100) / totalSteps else 0
-        
-        progressLabel?.text = "$progressPercentage% complete"
-        
         statusLabel?.text = getStatusText(planItem.status)
         statusLabel?.foreground = getStatusColor(planItem.status)
         
@@ -235,10 +220,10 @@ class TaskSectionPanel(
     
     private fun getStatusColor(status: TaskStatus): JBColor {
         return when (status) {
-            TaskStatus.COMPLETED -> JBColor(0x59A869, 0x59A869) // Green
-            TaskStatus.FAILED -> JBColor(0xD94F4F, 0xD94F4F) // Red
-            TaskStatus.IN_PROGRESS -> JBColor(0x3592C4, 0x3592C4) // Blue
-            TaskStatus.TODO -> JBColor(0x808080, 0x808080) // Gray
+            TaskStatus.COMPLETED -> AutoDevColors.COMPLETED_STATUS
+            TaskStatus.FAILED -> AutoDevColors.FAILED_STATUS
+            TaskStatus.IN_PROGRESS -> AutoDevColors.IN_PROGRESS_STATUS
+            TaskStatus.TODO -> AutoDevColors.TODO_STATUS
         }
     }
 }
diff --git a/core/src/main/kotlin/cc/unitmesh/devti/sketch/ui/plan/TaskStepPanel.kt b/core/src/main/kotlin/cc/unitmesh/devti/sketch/ui/plan/TaskStepPanel.kt
@@ -6,6 +6,7 @@ import cc.unitmesh.devti.gui.AutoDevToolWindowFactory
 import cc.unitmesh.devti.gui.chat.message.ChatActionType
 import cc.unitmesh.devti.observer.plan.AgentPlanStep
 import cc.unitmesh.devti.observer.plan.TaskStatus
+import cc.unitmesh.devti.sketch.ui.AutoDevColors
 import com.intellij.openapi.editor.colors.EditorColorsManager
 import com.intellij.openapi.fileEditor.FileEditorManager
 import com.intellij.openapi.project.Project
@@ -45,20 +46,15 @@ class TaskStepPanel(
     init {
         layout = BorderLayout()
         background = JBUI.CurrentTheme.ToolWindow.background()
-        border = CompoundBorder(
-            BorderFactory.createMatteBorder(0, 0, 1, 0, JBColor(0xE5E5E5, 0x323232)),
-            JBUI.Borders.empty(3, 2)  // Reduced padding for more compact view
-        )
+        border = JBUI.Borders.empty(3, 2)
 
-        // Left panel for status icon with reduced spacing
         val leftPanel = JPanel(FlowLayout(FlowLayout.LEFT, 2, 0)).apply {
             isOpaque = false
         }
 
         val statusIcon = createStatusIcon()
         leftPanel.add(statusIcon)
 
-        // Center panel for task description with links
         taskLabel = createTaskTextPane()
         doc = taskLabel.styledDocument
         updateTaskLabel()
@@ -105,26 +101,30 @@ class TaskStepPanel(
         add(rightPanel, BorderLayout.EAST)
 
         setupContextMenu()
-
-        // Set preferred size for compact view
         preferredSize = Dimension(preferredSize.width, Math.min(preferredSize.height, 28))
     }
 
     private fun createStatusIcon(): JComponent {
         return when (task.status) {
             TaskStatus.COMPLETED -> JLabel(AutoDevIcons.Checked).apply {
-                preferredSize = Dimension(16, 16)
+                preferredSize = Dimension(20, 16)
+                border = JBUI.Borders.empty()
             }
 
             TaskStatus.FAILED -> JLabel(AutoDevIcons.Error).apply {
-                preferredSize = Dimension(16, 16)
+                preferredSize = Dimension(20, 16)
+                border = JBUI.Borders.empty()
             }
 
             TaskStatus.IN_PROGRESS -> JLabel(AutoDevIcons.Build).apply {
-                preferredSize = Dimension(16, 16)
+                preferredSize = Dimension(20, 16)
+                border = JBUI.Borders.empty()
             }
 
             TaskStatus.TODO -> JCheckBox().apply {
+                border = JBUI.Borders.empty()
+                preferredSize = Dimension(20, 16)
+
                 isSelected = task.completed
                 addActionListener {
                     task.completed = isSelected
@@ -133,10 +133,9 @@ class TaskStepPanel(
                     updateStatusLabel()
                     onStatusChange()
                 }
+
                 isBorderPainted = false
                 isContentAreaFilled = false
-                background = JBUI.CurrentTheme.ToolWindow.background()
-                preferredSize = Dimension(16, 16)
             }
         }
     }
@@ -207,7 +206,7 @@ class TaskStepPanel(
                 currentPos += beforeLink.length
 
                 val linkStyle = SimpleAttributeSet().apply {
-                    StyleConstants.setForeground(this, JBColor(0x3366CC, 0x589DF6))
+                    StyleConstants.setForeground(this, AutoDevColors.LINK_COLOR)
                     StyleConstants.setUnderline(this, true)
                 }
 
@@ -233,15 +232,15 @@ class TaskStepPanel(
         when (status) {
             TaskStatus.COMPLETED -> {
                 StyleConstants.setStrikeThrough(style, true)
-                StyleConstants.setForeground(style, JBColor(0x808080, 0x999999))
+                StyleConstants.setForeground(style, AutoDevColors.COMPLETED_TEXT)
             }
 
             TaskStatus.FAILED -> {
-                StyleConstants.setForeground(style, JBColor(0xD94F4F, 0xFF6B68))
+                StyleConstants.setForeground(style, AutoDevColors.FAILED_TEXT)
             }
 
             TaskStatus.IN_PROGRESS -> {
-                StyleConstants.setForeground(style, JBColor(0x3592C4, 0x589DF6))
+                StyleConstants.setForeground(style, AutoDevColors.IN_PROGRESS_TEXT)
                 StyleConstants.setItalic(style, true)
             }
 
@@ -356,10 +355,10 @@ class TaskStepPanel(
 
     private fun getStatusColor(status: TaskStatus): JBColor {
         return when (status) {
-            TaskStatus.COMPLETED -> JBColor(0x59A869, 0x59A869) // Green
-            TaskStatus.FAILED -> JBColor(0xD94F4F, 0xD94F4F) // Red
-            TaskStatus.IN_PROGRESS -> JBColor(0x3592C4, 0x3592C4) // Blue
-            TaskStatus.TODO -> JBColor(0x808080, 0x808080) // Gray
+            TaskStatus.COMPLETED -> AutoDevColors.COMPLETED_STATUS
+            TaskStatus.FAILED -> AutoDevColors.FAILED_STATUS
+            TaskStatus.IN_PROGRESS -> AutoDevColors.IN_PROGRESS_STATUS
+            TaskStatus.TODO -> AutoDevColors.TODO_STATUS
         }
     }
 }
diff --git a/core/src/main/resources/icons/check.svg b/core/src/main/resources/icons/check.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>checkbox-svgrepo-com (1)</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="checkbox-svgrepo-com-(1)" transform="translate(1.210526, 1.210526)" fill-rule="nonzero" stroke="#6D7278">
+            <rect id="path" x="0" y="0" width="15.9837203" height="15.9837203" rx="2"></rect>
+        </g>
+    </g>
+</svg>
