AppSearchableDropdown.qml

import QtQuick
import QtQuick.Controls
import qs.Commons
import qs.Ui

// Same look as qs.Ui.SearchableDropdown, with an in-window Overlay menu
// so a second click on the trigger closes it (QQC Popup cannot do that
// inside the Omarchy keyboard panel).
Item {
  id: root

  property string label: ""
  property string value: ""
  property var options: []
  property string placeholderText: "Search..."
  property string emptyText: "No matches"
  property string triggerLabel: ""

  property color foreground: Color.popups.text
  property color background: Color.popups.background
  property color popupBorder: Color.popups.border
  property color accent: Color.accent
  readonly property var popupBorderSpec: Border.localOrSurfaceSpec("popups", "border", popupBorder, Color.popups.border, Style.normalBorderWidth)
  property string fontFamily: Style.font.family
  property int rowHeight: Style.spacing.controlHeight
  property int popupRowHeight: Style.spacing.popupRowHeight
  property int popupMinHeight: Style.spacing.searchablePopupMinHeight
  property bool showLabel: true
  property bool hasCursor: false

  property bool menuOpen: false
  readonly property bool popupOpen: menuOpen
  function open() { menuOpen = true }
  function close() { menuOpen = false }
  function toggle() { menuOpen = !menuOpen }

  signal changed(string value)
  signal hovered(bool isHovered)

  function optionValue(o) {
    return (o && typeof o === "object") ? String(o.value) : String(o)
  }
  function optionLabel(o) {
    return (o && typeof o === "object") ? String(o.label) : String(o)
  }
  function optionDescription(o) {
    return (o && typeof o === "object" && o.description) ? String(o.description) : ""
  }
  function currentLabel() {
    for (var i = 0; i < options.length; i++) {
      if (optionValue(options[i]) === value) return optionLabel(options[i])
    }
    return ""
  }

  property var filtered: options
  function recomputeFiltered() {
    var q = searchField.text.toLowerCase()
    if (!q) { filtered = options; return }
    var out = []
    for (var i = 0; i < options.length; i++) {
      var lbl = optionLabel(options[i]).toLowerCase()
      var desc = optionDescription(options[i]).toLowerCase()
      if (lbl.indexOf(q) !== -1 || desc.indexOf(q) !== -1) out.push(options[i])
    }
    filtered = out
  }

  onOptionsChanged: recomputeFiltered()
  onMenuOpenChanged: {
    if (menuOpen) {
      searchField.text = ""
      recomputeFiltered()
      Qt.callLater(function() { searchField.forceActiveFocus() })
    } else {
      searchField.text = ""
    }
  }

  implicitWidth: Style.spacing.searchableDropdownWidth
  implicitHeight: showLabel && label !== "" ? rowHeight + Style.spacing.huge : rowHeight

  Column {
    anchors.fill: parent
    spacing: Style.spacing.labelGap

    Text {
      textFormat: Text.PlainText
      visible: root.showLabel && root.label !== ""
      text: root.label
      color: Qt.darker(root.foreground, 1.4)
      font.family: root.fontFamily
      font.pixelSize: Style.font.caption
      font.bold: true
    }

    BorderSurface {
      id: trigger
      width: parent.width
      height: root.rowHeight
      radius: Style.cornerRadius

      readonly property bool _focused: trigger.activeFocus
      readonly property bool _hot: triggerHover.hovered || root.hasCursor || root.menuOpen
      readonly property var _borderSpec: Border.controlSpec(_focused ? "focus" : (_hot ? "hover-cursor" : "normal"), root.foreground, root.accent)

      color: Style.controlFill(_focused, _hot, root.foreground, root.accent)
      borderSpec: _borderSpec
      activeFocusOnTab: true

      HoverHandler {
        id: triggerHover
        onHoveredChanged: root.hovered(hovered)
      }

      Keys.onPressed: function(event) {
        if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter
            || event.key === Qt.Key_Space || event.key === Qt.Key_Down) {
          root.toggle(); event.accepted = true
        } else if (event.key === Qt.Key_Escape && root.menuOpen) {
          root.close(); event.accepted = true
        }
      }

      Text {
        textFormat: Text.PlainText
        anchors.left: parent.left
        anchors.right: chevron.left
        anchors.verticalCenter: parent.verticalCenter
        anchors.leftMargin: trigger.borderLeft + Style.spacing.controlPaddingX
        anchors.rightMargin: trigger.borderRight + Style.spacing.md
        text: root.currentLabel() || root.triggerLabel || root.placeholderText
        color: (root.currentLabel() || root.triggerLabel) ? root.foreground : Qt.darker(root.foreground, 1.5)
        font.family: root.fontFamily
        font.pixelSize: Style.font.body
        elide: Text.ElideRight
      }

      Text {
        id: chevron
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        anchors.rightMargin: trigger.borderRight + Style.spacing.controlGap
        text: root.menuOpen ? "󰅃" : "󰅀"
        color: Qt.darker(root.foreground, 1.2)
        font.family: root.fontFamily
        font.pixelSize: Style.font.body
      }

      MouseArea {
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
        onClicked: {
          trigger.forceActiveFocus()
          root.toggle()
        }
      }
    }
  }

  Item {
    id: layer
    parent: root.Overlay.overlay ? root.Overlay.overlay : (root.Window.window ? root.Window.window.contentItem : root)
    visible: root.menuOpen && parent
    anchors.fill: parent
    z: 10000

    MouseArea {
      anchors.fill: parent
      onPressed: function(mouse) {
        var p = menuCard.mapFromItem(layer, mouse.x, mouse.y)
        var onMenu = p.x >= 0 && p.y >= 0 && p.x <= menuCard.width && p.y <= menuCard.height
        if (onMenu) {
          mouse.accepted = false
          return
        }
        root.close()
        mouse.accepted = true
      }
    }

    BorderSurface {
      id: menuCard
      readonly property point origin: {
        if (!root.menuOpen || !layer.parent) return Qt.point(0, 0)
        return trigger.mapToItem(layer.parent, 0, trigger.height + Style.spacing.xxs)
      }
      x: origin.x
      y: origin.y
      width: trigger.width
      implicitHeight: Math.max(root.popupMinHeight,
                               Math.min(resultList.contentHeight + Style.space(50),
                                        root.popupRowHeight * 6 + 5 * Style.spacing.labelGap + Style.space(50)))
      color: root.background
      borderSpec: root.popupBorderSpec
      radius: Style.cornerRadius

      Column {
        anchors.fill: parent
        anchors.margins: Style.spacing.hairline
        spacing: 0

        Item {
          width: parent.width
          height: root.popupRowHeight + Style.spacing.controlPaddingX

          TextField {
            id: searchField
            anchors.fill: parent
            anchors.margins: Style.spacing.md
            placeholderText: root.placeholderText
            foreground: root.foreground
            accent: root.accent
            font.family: root.fontFamily
            font.pixelSize: Style.font.body
            onTextChanged: {
              root.recomputeFiltered()
              if (resultList.count > 0) resultList.currentIndex = 0
            }
            Keys.onPressed: function(event) {
              if (event.key === Qt.Key_Escape) {
                root.close(); event.accepted = true
              } else if (event.key === Qt.Key_Down && resultList.count > 0) {
                resultList.currentIndex = 0
                resultList.forceActiveFocus()
                event.accepted = true
              } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
                if (resultList.count > 0) {
                  resultList.currentIndex = 0
                  resultList.selectCurrent()
                }
                event.accepted = true
              }
            }
          }
        }

        Rectangle {
          width: parent.width
          height: 1
          color: Util.alpha(root.foreground, 0.10)
        }

        Item {
          width: parent.width
          height: parent.height - root.popupRowHeight - Style.spacing.controlPaddingX - 1

          Text {
            textFormat: Text.PlainText
            anchors.centerIn: parent
            visible: resultList.count === 0
            text: root.emptyText
            color: Qt.darker(root.foreground, 1.6)
            font.family: root.fontFamily
            font.pixelSize: Style.font.body
          }

          ListView {
            id: resultList
            anchors.fill: parent
            spacing: Style.spacing.labelGap
            clip: true
            boundsBehavior: Flickable.StopAtBounds
            model: root.filtered
            currentIndex: -1

            function selectCurrent() {
              if (currentIndex < 0 || currentIndex >= root.filtered.length) return
              var v = root.optionValue(root.filtered[currentIndex])
              // The parent owns value; assigning here would remove its QML binding.
              root.changed(v)
              root.close()
            }

            delegate: Rectangle {
              required property var modelData
              required property int index
              width: resultList.width
              height: Math.max(root.popupRowHeight, rowContent.implicitHeight + Style.spacing.rowPaddingX)
              color: index === resultList.currentIndex
                ? Style.hoverFillFor(root.foreground, root.accent)
                : "transparent"

              Column {
                id: rowContent
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: Style.spacing.controlPaddingX
                anchors.rightMargin: Style.spacing.controlPaddingX
                spacing: Style.spacing.xxs

                Text {
                  textFormat: Text.PlainText
                  text: root.optionLabel(modelData)
                  color: index === resultList.currentIndex ? Style.hoverStateColor(root.foreground, root.accent) : root.foreground
                  font.family: root.fontFamily
                  font.pixelSize: Style.font.body
                  elide: Text.ElideRight
                  width: parent.width
                }
                Text {
                  textFormat: Text.PlainText
                  visible: text !== ""
                  text: root.optionDescription(modelData)
                  color: Qt.darker(root.foreground, 1.5)
                  font.family: root.fontFamily
                  font.pixelSize: Style.font.caption
                  elide: Text.ElideRight
                  width: parent.width
                }
              }

              MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                onPositionChanged: resultList.currentIndex = parent.index
                onClicked: {
                  resultList.currentIndex = parent.index
                  resultList.selectCurrent()
                }
              }
            }
          }
        }
      }
    }
  }
}