feat(gui): refactor AutoDevVariableListComponent to use JBList and add support for variable selection popup #51

The AutoDevVariableListComponent has been refactored to use a JBList instead of a custom component. This change improves the user experience by providing a standard list component with a cell renderer that can be easily customized. Additionally, a new popup has been added to allow for the selection of variables. The popup is created using the JBPopupFactory and is displayed above the input component. The popup's size is dynamically adjusted to fit the available space.

Author: phodal

src/main/kotlin/cc/unitmesh/devti/gui/chat/AutoDevInputSection.kt

@@ -23,31 +23,33 @@ import com.intellij.openapi.ui.ComponentValidator
 import com.intellij.openapi.ui.ValidationInfo
 import com.intellij.openapi.ui.popup.JBPopup
 import com.intellij.openapi.ui.popup.JBPopupFactory
+import com.intellij.openapi.ui.popup.JBPopupListener
+import com.intellij.openapi.ui.popup.LightweightWindowEvent
 import com.intellij.openapi.wm.IdeFocusManager
 import com.intellij.openapi.wm.impl.InternalDecorator
 import com.intellij.temporary.gui.block.AutoDevCoolBorder
 import com.intellij.ui.JBColor
 import com.intellij.ui.MutableCollectionComboBoxModel
 import com.intellij.ui.SimpleListCellRenderer
+import com.intellij.ui.awt.RelativePoint
 import com.intellij.ui.components.JBLabel
 import com.intellij.ui.content.ContentManager
 import com.intellij.util.EventDispatcher
 import com.intellij.util.ui.JBEmptyBorder
 import com.intellij.util.ui.JBUI
 import com.intellij.util.ui.UIUtil
 import com.intellij.util.ui.components.BorderLayoutPanel
-import com.intellij.vcsUtil.showAbove
 import kotlinx.serialization.decodeFromString
 import kotlinx.serialization.json.Json
 import java.awt.Color
 import java.awt.Component
 import java.awt.Dimension
+import java.awt.Point
 import java.awt.event.MouseAdapter
 import java.awt.event.MouseEvent
 import java.util.function.Supplier
 import javax.swing.Box
 import javax.swing.JComponent
-import javax.swing.JTextField
 import kotlin.math.max
 import kotlin.math.min
 
@@ -106,11 +108,15 @@ class AutoDevInputSection(private val project: Project, val disposable: Disposab
 
                 // check new input == $
                 if (event.newFragment.contentEquals("$") || event.newFragment.contentEquals("¥")) {
+                    if (popup?.isVisible == true) {
+                        popup?.cancel()
+                    }
+
                     if (popup?.isDisposed == true) {
                         popup = createPopup()
-                        popup?.showAbove(input)
+                        showPopupAbove(popup!!, this@AutoDevInputSection)
                     } else {
-                        popup?.showAbove(input)
+                        showPopupAbove(popup!!, this@AutoDevInputSection)
                     }
                 }
             }
@@ -169,10 +175,13 @@ class AutoDevInputSection(private val project: Project, val disposable: Disposab
         tokenizer = TokenizerImpl.INSTANCE
     }
 
-    private fun createPopup() = JBPopupFactory.getInstance().createComponentPopupBuilder(AutoDevVariableListComponent(), null)
+    private fun createPopup() = JBPopupFactory.getInstance()
+        .createComponentPopupBuilder(AutoDevVariableList(listOf(
+            AutoDevVariableListComponent(),
+        ) ,null), null )
         .setRequestFocus(false)
         .setMinSize(
-            Dimension(200, 200)
+            Dimension(this@AutoDevInputSection.width, 0)
         ).createPopup()
 
 
@@ -266,4 +275,19 @@ class AutoDevInputSection(private val project: Project, val disposable: Disposab
         }
 
     val focusableComponent: JComponent get() = input
-}
+}
+
+fun showPopupAbove(popup: JBPopup, component: Component) {
+    val northWest = RelativePoint(component, Point())
+
+    popup.addListener(object : JBPopupListener {
+        override fun beforeShown(event: LightweightWindowEvent) {
+            val location = Point(popup.locationOnScreen).apply { y = northWest.screenPoint.y - popup.size.height }
+
+            popup.setLocation(location)
+            popup.removeListener(this)
+        }
+    })
+
+    popup.show(northWest)
+}

src/main/kotlin/cc/unitmesh/devti/gui/chat/AutoDevVariableList.kt

@@ -0,0 +1,74 @@
+package cc.unitmesh.devti.gui.chat
+
+import com.intellij.ui.Gray
+import com.intellij.ui.JBColor
+import com.intellij.ui.components.JBList
+import java.awt.Component
+import java.awt.event.MouseEvent
+import java.awt.event.MouseListener
+import javax.swing.*
+import javax.swing.border.Border
+import javax.swing.event.MouseInputAdapter
+
+class AutoDevVariableList(
+    val list: List<AutoDevVariableListComponent>,
+    val callback: ((AutoDevVariableListComponent) -> Unit?)?,
+) : JBList<AutoDevVariableListComponent>() {
+    init {
+        border = BorderFactory.createEmptyBorder(0, 5, 0, 5)
+        setCellRenderer(VariableListCellRenderer())
+        addMouseListener(object : MouseInputAdapter() {
+            override fun mouseClicked(event: MouseEvent?) {
+                val item = selectedValue ?: return
+                callback?.invoke(item)
+            }
+        } as MouseListener)
+    }
+}
+
+class VariableListCellRenderer : ListCellRenderer<AutoDevVariableListComponent> {
+    private var emptyBorder: Border = BorderFactory.createEmptyBorder(1, 1, 1, 1)
+
+    override fun getListCellRendererComponent(
+        jList: JList<out AutoDevVariableListComponent>,
+        value: AutoDevVariableListComponent?,
+        index: Int,
+        isSelected: Boolean,
+        cellHasFocus: Boolean,
+    ): Component {
+        if (isSelected) {
+            value!!.background = jList.selectionBackground
+            value.foreground = jList.selectionForeground
+        } else {
+            value!!.background = jList.getBackground()
+            value.foreground = jList.getForeground()
+        }
+        value.isEnabled = jList.isEnabled
+        value.font = jList.font
+
+        var border: Border? = null
+        if (cellHasFocus) {
+            if (isSelected) {
+                border = UIManager.getBorder("List.focusSelectedCellHighlightBorder")
+            }
+            if (border == null) {
+                border = UIManager.getBorder("List.focusCellHighlightBorder")
+            }
+        } else {
+            border = this.emptyBorder
+        }
+
+        value.border = border
+        return value
+    }
+
+}
+
+class AutoDevVariableListComponent : JPanel() {
+    init {
+        val label = JLabel("doing something")
+        label.border = BorderFactory.createEmptyBorder(0, 8, 0, 0)
+        label.foreground = JBColor.namedColor("Component.infoForeground", JBColor(Gray.x99, Gray.x78))
+        add(label, "East")
+    }
+}