Panel.qml

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

Panel {
  id: root
  moduleName: "esh.ajazz-keyboard"
  manageIpc: false

  property var anchorItem: null
  property var hostWidget: null

  readonly property var service: bar && bar.shell
    ? bar.shell.serviceFor(root.moduleName) : null
  readonly property color foreground: bar ? bar.foreground : Color.foreground
  readonly property string fontFamily: bar ? bar.fontFamily : Style.font.family
  readonly property bool ready: service && service.controllable
  readonly property string statusMeta: {
    if (!service || !service.loaded) return "CONNECTING"
    if (service.busy) return "APPLYING"
    if (service.musicActive && service.effect === "music")
      return "MUSIC · " + String(service.musicPattern || "radial").toUpperCase()
    if (service.cycleActive)
      return "SHUFFLE · " + String(service.cycleMode || "normal").toUpperCase()
    if (service.ambientActive)
      return "WALLPAPER · " + String(service.ambientEffect || "static").toUpperCase()
        + " · " + String(service.ambientColor || "").toUpperCase()
    if (service.controllable) return "WIRED · READY"
    if (service.transport === "bluetooth") return "BLUETOOTH"
    return String(service.statusCode || "OFFLINE").toUpperCase()
  }

  property real previewBrightness: service ? service.brightness : 5
  property real previewSpeed: service ? service.speed : 3
  property string musicBackCustom: ""

  function open() {
    root.controller.show()
  }

  function close() {
    root.controller.hide()
  }

  function switchPanel(direction) {
    if (root.bar && typeof root.bar.switchPanelFrom === "function")
      return root.bar.switchPanelFrom(root.hostWidget || root, direction)
    return false
  }

  KeyboardPanel {
    id: panel
    anchorItem: root.anchorItem
    owner: root.hostWidget || root
    bar: root.bar
    open: root.opened
    focusTarget: keyCatcher
    contentWidth: panel.fittedContentWidth(Style.space(390))
    contentHeight: panel.fittedContentHeight(contentColumn.implicitHeight, Style.space(580))

    PanelKeyCatcher {
      id: keyCatcher
      anchors.fill: parent
              blocked: effectDropdown.popupOpen || directionDropdown.popupOpen
                || patternDropdown.popupOpen || backDropdown.popupOpen
                || waveModeDropdown.popupOpen || colorPicker.editing
                || cycleNormalIntervalDropdown.popupOpen
                || cycleAmbientIntervalDropdown.popupOpen
      onCloseRequested: root.close()
      onTabRequested: function(direction) { root.switchPanel(direction) }

      Flickable {
        id: flick
        anchors.fill: parent
        contentWidth: width
        contentHeight: contentColumn.implicitHeight
        clip: true
        boundsBehavior: Flickable.StopAtBounds
        flickableDirection: Flickable.VerticalFlick
        interactive: contentHeight > height
        ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded }

        Column {
          id: contentColumn
          width: flick.width
          spacing: Style.space(12)

          PanelHero {
            foreground: root.foreground
            fontFamily: root.fontFamily
            title: "AJAZZ AK820"
            meta: root.statusMeta
            iconComponent: Component {
              Item {
                implicitWidth: Style.space(58)
                implicitHeight: Style.space(58)
                Text {
                  anchors.centerIn: parent
                  text: "󰌌"
                  color: root.ready ? root.service.color : root.foreground
                  font.family: root.fontFamily
                  font.pixelSize: Style.font.display
                }
              }
            }
          }

          PanelSeparator { foreground: root.foreground }

          BorderSurface {
            visible: !root.ready
            width: parent.width
            implicitHeight: offlineContent.implicitHeight + Style.space(24)
            radius: Style.cornerRadius
            color: Style.normalFillFor(root.foreground, Color.accent)
            borderSpec: Border.controlSpec("normal", root.foreground, Color.accent)

            Column {
              id: offlineContent
              anchors.left: parent.left
              anchors.right: parent.right
              anchors.verticalCenter: parent.verticalCenter
              anchors.leftMargin: Style.space(14)
              anchors.rightMargin: Style.space(14)
              spacing: Style.space(5)

              Text {
                width: parent.width
                text: root.service ? root.service.statusMessage : "Starting keyboard service"
                color: root.foreground
                font.family: root.fontFamily
                font.pixelSize: Style.font.subtitle
                font.bold: true
                wrapMode: Text.WordWrap
              }

              Text {
                width: parent.width
                text: root.service && root.service.transport === "bluetooth"
                  ? "Bluetooth carries normal key input only. Move the keyboard switch to wired mode and connect USB; this panel will detect it automatically."
                  : "The controller only writes to the verified FF13 lighting interface. Unknown HID devices are never touched."
                color: Qt.darker(root.foreground, 1.5)
                font.family: root.fontFamily
                font.pixelSize: Style.font.caption
                wrapMode: Text.WordWrap
              }
            }
          }

          Column {
            visible: root.service && root.service.connected
            width: parent.width
            spacing: Style.space(10)
            enabled: root.ready
            opacity: enabled ? 1 : 0.42

            BorderSurface {
              visible: root.service && root.service.connected
                && !(root.service && root.service.ambientActive)
              width: parent.width
              implicitHeight: musicCard.implicitHeight + Style.space(24)
              radius: Style.cornerRadius
              color: Style.normalFillFor(root.foreground, Color.accent)
              borderSpec: Border.controlSpec("normal", root.foreground, Color.accent)

              Column {
                id: musicCard
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: Style.space(14)
                anchors.rightMargin: Style.space(14)
                spacing: Style.space(10)

                Toggle {
                  width: parent.width
                  label: "Music visualizer"
                  description: "Per-key RGB reacting to system audio."
                  checked: root.service ? root.service.musicActive : false
                  foreground: root.foreground
                  fontFamily: root.fontFamily
                  onClicked: root.service.toggleMusic()
                }

                Column {
                  visible: root.service && root.service.musicActive
                  width: parent.width
                  spacing: Style.space(10)

                  Dropdown {
                    id: patternDropdown
                  width: parent.width
                  label: "Pattern"
                  value: root.service ? root.service.musicPattern : "radial"
                  options: [
                    { value: "radial", label: "Radial (center out)" },
                    { value: "pulse", label: "Pulse (whole board)" },
                    { value: "bars", label: "Equalizer bars" },
                    { value: "wave", label: "Traveling wave" }
                  ]
                  foreground: root.foreground
                  fontFamily: root.fontFamily
                  onChanged: function(value) { root.service.setMusicPattern(value) }
                }

                Row {
                  width: parent.width
                  spacing: Style.space(10)

                  Column {
                    width: (parent.width - parent.spacing) / 2
                    spacing: Style.space(5)
                    Text {
                      text: "Background"
                      color: root.foreground
                      font.family: root.fontFamily
                      font.pixelSize: Style.font.caption
                      font.bold: true
                    }
                    Dropdown {
                      id: backDropdown
                      width: parent.width
                      value: root.service && root.service.musicBackcolor === "#000000" ? "off" : "custom"
                      options: [
                        { value: "off", label: "Off" },
                        { value: "custom", label: "Color" }
                      ]
                      foreground: root.foreground
                      fontFamily: root.fontFamily
                      onChanged: function(value) {
                        if (value === "off") root.service.setMusicBackcolor("#000000")
                        else root.service.setMusicBackcolor(
                          root.musicBackCustom !== "" ? root.musicBackCustom : "#101018")
                      }
                    }
                  }

                  Column {
                    width: (parent.width - parent.spacing) / 2
                    spacing: Style.space(5)
                    Text {
                      text: "Wave colors"
                      color: root.foreground
                      font.family: root.fontFamily
                      font.pixelSize: Style.font.caption
                      font.bold: true
                    }
                    Dropdown {
                      id: waveModeDropdown
                      width: parent.width
                      value: root.service ? root.service.musicColorMode : "rainbow"
                      options: [
                        { value: "rainbow", label: "Rainbow" },
                        { value: "solid", label: "Solid" }
                      ]
                      foreground: root.foreground
                      fontFamily: root.fontFamily
                      onChanged: function(value) { root.service.setMusicColorMode(value) }
                    }
                  }
                }

                ColorPicker {
                  width: parent.width
                  visible: root.service && root.service.musicBackcolor !== "#000000"
                  foreground: root.foreground
                  fontFamily: root.fontFamily
                  colorValue: root.service ? root.service.musicBackcolor : "#101018"
                  onCommitted: function(color) {
                    root.musicBackCustom = String(color).toLowerCase()
                    root.service.setMusicBackcolor(root.musicBackCustom)
                  }
                }

                ColorPicker {
                  width: parent.width
                  visible: root.service && root.service.musicColorMode === "solid"
                  foreground: root.foreground
                  fontFamily: root.fontFamily
                  colorValue: root.service ? root.service.musicColor : "#7c3aed"
                  onCommitted: function(color) { root.service.setMusicColor(color) }
                }

                Column {
                  width: parent.width
                  spacing: Style.space(5)
                  Text {
                    text: "Sensitivity  " + (root.service ? root.service.musicSensitivity.toFixed(1) : "1.0") + "x"
                    color: root.foreground
                    font.family: root.fontFamily
                    font.pixelSize: Style.font.caption
                    font.bold: true
                  }
                  PanelSlider {
                    width: parent.width
                    bar: root.bar
                    minimum: 0.2
                    maximum: 3.0
                    step: 0.1
                    integer: false
                    tickCount: 0
                    value: root.service ? root.service.musicSensitivity : 1.0
                    onReleased: function(value) { root.service.setMusicSensitivity(value) }
                  }
                  }

                  Text {
                    visible: root.service && root.service.lastError !== "" && root.service.musicActive
                    width: parent.width
                    text: root.service ? root.service.lastError : ""
                    color: Color.urgent
                    font.family: root.fontFamily
                    font.pixelSize: Style.font.caption
                    wrapMode: Text.WordWrap
                  }
                }
              }
            }

            BorderSurface {
              visible: root.service && root.service.connected
                && !(root.service && root.service.musicActive)
              width: parent.width
              implicitHeight: ambientCard.implicitHeight + Style.space(24)
              radius: Style.cornerRadius
              color: Style.normalFillFor(root.foreground, Color.accent)
              borderSpec: Border.controlSpec("normal", root.foreground, Color.accent)

              Column {
                id: ambientCard
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: Style.space(14)
                anchors.rightMargin: Style.space(14)
                spacing: Style.space(10)

                Toggle {
                  width: parent.width
                  label: "Wallpaper sync"
                  description: "Match keyboard color to your background."
                  checked: root.service ? root.service.ambientActive : false
                  foreground: root.foreground
                  fontFamily: root.fontFamily
                  onClicked: root.service.toggleAmbient()
                }

                Dropdown {
                  visible: root.service && root.service.ambientActive
                  width: parent.width
                  label: "Effect"
                  value: root.service ? root.service.ambientEffect : "static"
                  options: root.service ? root.service.effectOptions : []
                  foreground: root.foreground
                  fontFamily: root.fontFamily
                  onChanged: function(value) { root.service.setAmbientEffect(value) }
                }

                Row {
                  visible: root.service && root.service.ambientActive
                  width: parent.width
                  spacing: Style.space(10)

                  Rectangle {
                    width: Style.space(24)
                    height: Style.space(24)
                    radius: Style.space(6)
                    color: root.service ? root.service.ambientColor : "#7c3aed"
                    border.width: 1
                    border.color: root.foreground
                  }

                  Column {
                    width: parent.width - Style.space(24) - Style.space(10)
                    spacing: Style.space(2)

                    Text {
                      text: root.service ? String(root.service.ambientColor).toUpperCase() : ""
                      color: root.foreground
                      font.family: root.fontFamily
                      font.pixelSize: Style.font.subtitle
                      font.bold: true
                    }

                    Text {
                      text: root.service ? root.service.ambientWallpaper : ""
                      color: root.foreground
                      font.family: root.fontFamily
                      font.pixelSize: Style.font.caption
                      wrapMode: Text.WordWrap
                      width: parent.width
                    }
                  }
                }

                Toggle {
                  visible: root.service && (root.service.ambientActive
                    || (root.service.cycleActive && root.service.cycleMode === "ambient"))
                  width: parent.width
                  label: "Auto-shuffle"
                  description: "Rotate effects on a timer, keep wallpaper color."
                  checked: root.service ? (root.service.cycleActive && root.service.cycleMode === "ambient") : false
                  foreground: root.foreground
                  fontFamily: root.fontFamily
                  onClicked: root.service.toggleCycle("ambient")
                }

                Dropdown {
                  id: cycleAmbientIntervalDropdown
                  visible: root.service && root.service.cycleActive && root.service.cycleMode === "ambient"
                  width: parent.width
                  label: "Shuffle every"
                  value: root.service ? String(root.service.cycleAmbientInterval) : "300"
                  options: [
                    { value: "60", label: "Every minute" },
                    { value: "300", label: "Every 5 minutes" },
                    { value: "900", label: "Every 15 minutes" },
                    { value: "1800", label: "Every 30 minutes" }
                  ]
                  foreground: root.foreground
                  fontFamily: root.fontFamily
                  onChanged: function(value) { root.service.setCycleInterval("ambient", value) }
                }

                Text {
                  visible: root.service && root.service.lastError !== "" && root.service.ambientActive
                  width: parent.width
                  text: root.service ? root.service.lastError : ""
                  color: Color.urgent
                  font.family: root.fontFamily
                  font.pixelSize: Style.font.caption
                  wrapMode: Text.WordWrap
                }
              }
            }

            Column {
              visible: !(root.service && (root.service.musicActive || root.service.ambientActive))
              width: parent.width
              spacing: Style.space(10)

              PanelSectionHeader {
                width: parent.width
                text: "LIGHTING"
                foreground: root.foreground
                fontFamily: root.fontFamily
              }

              Dropdown {
                id: effectDropdown
                width: parent.width
                label: "Effect"
                value: root.service ? root.service.effect : "static"
                options: root.service ? root.service.effectOptions : []
                foreground: root.foreground
                fontFamily: root.fontFamily
                onChanged: function(value) { root.service.setEffect(value) }
              }

              ColorPicker {
                id: colorPicker
                width: parent.width
                foreground: root.foreground
                fontFamily: root.fontFamily
                colorValue: root.service ? root.service.color : "#7c3aed"
                onCommitted: function(color) { root.service.setColor(color) }
              }

              Row {
                width: parent.width
                spacing: Style.space(10)

                Column {
                  width: (parent.width - parent.spacing) / 2
                  spacing: Style.space(5)
                  Text {
                    text: "Brightness  " + Math.round(brightnessSlider.dragging
                      ? brightnessSlider.liveValue : root.previewBrightness) + "/5"
                    color: root.foreground
                    font.family: root.fontFamily
                    font.pixelSize: Style.font.caption
                    font.bold: true
                  }
                  PanelSlider {
                    id: brightnessSlider
                    width: parent.width
                    bar: root.bar
                    minimum: 0
                    maximum: 5
                    step: 1
                    integer: true
                    tickCount: 6
                    value: root.service ? root.service.brightness : 5
                    onMoved: function(value) { root.previewBrightness = value }
                    onReleased: function(value) { root.service.setBrightness(value) }
                  }
                }

                Column {
                  width: (parent.width - parent.spacing) / 2
                  spacing: Style.space(5)
                  Text {
                    text: "Speed  " + Math.round(speedSlider.dragging
                      ? speedSlider.liveValue : root.previewSpeed) + "/5"
                    color: root.foreground
                    font.family: root.fontFamily
                    font.pixelSize: Style.font.caption
                    font.bold: true
                  }
                  PanelSlider {
                    id: speedSlider
                    width: parent.width
                    bar: root.bar
                    minimum: 0
                    maximum: 5
                    step: 1
                    integer: true
                    tickCount: 6
                    value: root.service ? root.service.speed : 3
                    onMoved: function(value) { root.previewSpeed = value }
                    onReleased: function(value) { root.service.setSpeed(value) }
                  }
                }
              }

              Dropdown {
                id: directionDropdown
                width: parent.width
                label: "Direction"
                value: root.service ? root.service.direction : "left"
                options: [
                  { value: "left", label: "Left" },
                  { value: "right", label: "Right" },
                  { value: "up", label: "Up" },
                  { value: "down", label: "Down" }
                ]
                foreground: root.foreground
                fontFamily: root.fontFamily
                onChanged: function(value) { root.service.setDirection(value) }
              }

              Toggle {
                width: parent.width
                label: "Rainbow colors"
                description: "Let the selected effect cycle its own colors."
                checked: root.service ? root.service.rainbow : false
                foreground: root.foreground
                fontFamily: root.fontFamily
                onClicked: root.service.setRainbow(!root.service.rainbow)
              }

              Toggle {
                width: parent.width
                label: "Auto-shuffle"
                description: "Rotate effects on a timer."
                checked: root.service ? (root.service.cycleActive && root.service.cycleMode === "normal") : false
                foreground: root.foreground
                fontFamily: root.fontFamily
                onClicked: root.service.toggleCycle("normal")
              }

              Dropdown {
                id: cycleNormalIntervalDropdown
                visible: root.service && root.service.cycleActive && root.service.cycleMode === "normal"
                width: parent.width
                label: "Shuffle every"
                value: root.service ? String(root.service.cycleNormalInterval) : "300"
                options: [
                  { value: "60", label: "Every minute" },
                  { value: "300", label: "Every 5 minutes" },
                  { value: "900", label: "Every 15 minutes" },
                  { value: "1800", label: "Every 30 minutes" }
                ]
                foreground: root.foreground
                fontFamily: root.fontFamily
                onChanged: function(value) { root.service.setCycleInterval("normal", value) }
              }
            }

            Text {
              visible: root.service && root.service.lastError !== ""
              width: parent.width
              text: root.service ? root.service.lastError : ""
              color: Color.urgent
              font.family: root.fontFamily
              font.pixelSize: Style.font.caption
              wrapMode: Text.WordWrap
            }
          }
        }
      }
    }
  }
}