Panel.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
import Quickshell.Io
import qs.Commons
import qs.Ui
import "Model.js" as Model

Panel {
  id: root
  moduleName: "joonas.voice-reader"
  ipcTarget: "joonas.voice-reader"
  manageIpc: true

  property bool cursorActive: false
  property string focusSection: "read"
  property int focusIndex: 0
  property int voiceIndex: 0

  readonly property color foreground: bar ? bar.foreground : Color.foreground
  readonly property color urgent: bar ? bar.urgent : Color.urgent
  readonly property color dim: Qt.darker(foreground, 1.55)
  readonly property string fontFamily: bar ? bar.fontFamily : Style.font.family
  readonly property var status: reader.status || ({})
  readonly property string state: reader.state
  readonly property bool active: state === "speaking" || state === "paused" || state === "training" || state === "ingesting"
  readonly property var voices: reader.voices || []
  readonly property var training: reader.training
  readonly property var engine: root.status.engine || ({})
  readonly property var engineModels: engine.models || []
  readonly property var engineDownload: engine.download || null
  readonly property var readActions: [
    { id: "region", label: "Region", hint: "OCR a box" },
    { id: "clipboard", label: "Clipboard", hint: "Read paste buffer" },
    { id: "window", label: "Window", hint: "OCR focused window" }
  ]
  readonly property var transportActions: [
    { id: "toggle", label: state === "paused" ? "Resume" : (state === "speaking" ? "Pause" : "Pause") },
    { id: "stop", label: "Stop" }
  ]

  implicitWidth: button.implicitWidth
  implicitHeight: button.implicitHeight

  function runRead(id) {
    if (id === "region") reader.speakRegion()
    else if (id === "clipboard") reader.speakClipboard()
    else if (id === "window") reader.speakWindow()
    root.close()
  }

  function runTransport(id) {
    if (id === "toggle") reader.togglePause()
    else if (id === "stop") reader.stop()
  }

  function activateCursor() {
    if (focusSection === "read") runRead(readActions[Math.max(0, Math.min(focusIndex, readActions.length - 1))].id)
    else if (focusSection === "transport") runTransport(transportActions[Math.max(0, Math.min(focusIndex, transportActions.length - 1))].id)
    else if (focusSection === "voices" && voices.length > 0) {
      var v = voices[Math.max(0, Math.min(voiceIndex, voices.length - 1))]
      if (v && v.id) reader.setVoice(v.id)
    }
  }

  function moveCursor(dx, dy) {
    cursorActive = true
    if (focusSection === "read") {
      if (dx !== 0) {
        focusIndex = Math.max(0, Math.min(readActions.length - 1, focusIndex + dx))
        return
      }
      if (dy > 0) { focusSection = "transport"; focusIndex = 0 }
      return
    }
    if (focusSection === "transport") {
      if (dx !== 0) {
        focusIndex = Math.max(0, Math.min(transportActions.length - 1, focusIndex + dx))
        return
      }
      if (dy < 0) { focusSection = "read"; focusIndex = 0 }
      if (dy > 0) { focusSection = "voices"; voiceIndex = 0 }
      return
    }
    if (focusSection === "voices") {
      if (dy !== 0 && voices.length > 0)
        voiceIndex = Math.max(0, Math.min(voices.length - 1, voiceIndex + dy))
      if (dy < 0 && voiceIndex === 0) { focusSection = "transport"; focusIndex = 0 }
    }
  }

  onOpenedChanged: if (opened) {
    cursorActive = false
    focusSection = "read"
    focusIndex = 0
    reader.refresh()
    Qt.callLater(function() { keyCatcher.forceActiveFocus() })
  }

  Service { id: reader }

  BarIconButton {
    id: button
    anchors.fill: parent
    bar: root.bar
    text: Model.barIcon(root.state)
    active: root.active
    tooltipText: reader.offline ? "Voice Reader (offline)" : ("Voice Reader · " + Model.stateLabel(root.state))
    onPressed: function(buttonCode) {
      if (buttonCode === Qt.MiddleButton) reader.stop()
      else if (buttonCode === Qt.RightButton) reader.speakClipboard()
      else root.toggle()
    }
  }

  KeyboardPanel {
    id: panel
    anchorItem: button
    owner: root
    bar: root.bar
    open: root.opened
    focusTarget: keyCatcher
    contentWidth: panel.fittedContentWidth(Style.space(400))
    contentHeight: panel.fittedContentHeight(column.implicitHeight, Style.space(620))

    PanelKeyCatcher {
      id: keyCatcher
      anchors.fill: parent
      onMoveRequested: function(dx, dy) {
        if (!root.cursorActive) { root.cursorActive = true; return }
        root.moveCursor(dx, dy)
      }
      onActivateRequested: if (root.cursorActive) root.activateCursor()
      onCloseRequested: root.close()
      onTabRequested: function(direction) { root.switchPanel(direction) }
      onTextKey: function(t) {
        if (t === " ") reader.togglePause()
        else if (t === "s" || t === "S") reader.stop()
        else if (t === "r" || t === "R") reader.speakRegion()
        else if (t === "c" || t === "C") reader.speakClipboard()
      }

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

        Column {
          id: column
          width: panelFlick.width
          spacing: Style.space(12)

          PanelHero {
            width: parent.width
            title: "Voice Reader"
            meta: reader.offline ? "Daemon offline — starting…" : Model.heroMeta(root.status)
            detail: Model.stateLabel(root.state)
            foreground: root.foreground
            fontFamily: root.fontFamily
            iconComponent: Component {
              Text {
                text: Model.barIcon(root.state)
                color: root.foreground
                font.family: root.fontFamily
                font.pixelSize: Style.font.display
              }
            }
          }

          Text {
            visible: reader.lastError !== ""
            width: parent.width
            text: reader.lastError
            color: root.urgent
            font.family: root.fontFamily
            font.pixelSize: Style.font.bodySmall
            wrapMode: Text.WordWrap
          }

          Text {
            visible: !!(root.status.text) && (root.state === "speaking" || root.state === "paused")
            width: parent.width
            text: root.status.text || ""
            color: root.dim
            font.family: root.fontFamily
            font.pixelSize: Style.font.bodySmall
            wrapMode: Text.WordWrap
            maximumLineCount: 4
            elide: Text.ElideRight
          }

          PanelSectionHeader {
            text: "Read"
            foreground: root.foreground
            fontFamily: root.fontFamily
          }

          Row {
            width: parent.width
            spacing: Style.space(8)
            Repeater {
              model: root.readActions
              Button {
                text: modelData.label
                tooltipText: modelData.hint
                foreground: root.foreground
                fontFamily: root.fontFamily
                bordered: true
                hasCursor: root.cursorActive && root.focusSection === "read" && root.focusIndex === index
                onClicked: root.runRead(modelData.id)
              }
            }
          }

          Row {
            width: parent.width
            spacing: Style.space(8)
            Repeater {
              model: root.transportActions
              Button {
                text: modelData.label
                foreground: root.foreground
                fontFamily: root.fontFamily
                bordered: true
                enabled: root.state === "speaking" || root.state === "paused" || modelData.id === "stop"
                hasCursor: root.cursorActive && root.focusSection === "transport" && root.focusIndex === index
                onClicked: root.runTransport(modelData.id)
              }
            }
          }

          Row {
            width: parent.width
            spacing: Style.space(10)
            Text {
              text: "Speed"
              color: root.dim
              font.family: root.fontFamily
              font.pixelSize: Style.font.caption
              anchors.verticalCenter: parent.verticalCenter
            }
            PanelSlider {
              id: speedSlider
              width: parent.width - Style.space(80)
              bar: root.bar
              minimum: 0.5
              maximum: 2.0
              step: 0.1
              value: Number(root.status.speed || 1)
              onReleased: function(v) { reader.setSpeed(v) }
            }
          }

          PanelSeparator { foreground: root.foreground }

          PanelSectionHeader {
            text: "Voices"
            foreground: root.foreground
            fontFamily: root.fontFamily
          }

          Text {
            visible: root.voices.length === 0
            width: parent.width
            text: "No voices yet. Open an audio file to clone one."
            color: root.dim
            font.family: root.fontFamily
            font.pixelSize: Style.font.bodySmall
            wrapMode: Text.WordWrap
          }

          Column {
            width: parent.width
            spacing: Style.space(4)
            Repeater {
              model: root.voices
              Rectangle {
                width: parent.width
                implicitHeight: voiceCol.implicitHeight + Style.space(10)
                radius: Style.cornerRadius
                color: {
                  var selected = root.status.voice && root.status.voice.id === modelData.id
                  var hot = root.cursorActive && root.focusSection === "voices" && root.voiceIndex === index
                  if (hot || selected) return Style.selectedFillFor(root.foreground, Color.accent)
                  return "transparent"
                }

                MouseArea {
                  anchors.fill: parent
                  hoverEnabled: true
                  onClicked: reader.setVoice(modelData.id)
                  onEntered: { root.cursorActive = true; root.focusSection = "voices"; root.voiceIndex = index }
                }

                PanelActionButton {
                  anchors.right: parent.right
                  anchors.verticalCenter: parent.verticalCenter
                  anchors.rightMargin: Style.space(4)
                  z: 2
                  iconText: "󰅖"
                  tooltipText: "Delete " + modelData.name
                  foreground: root.foreground
                  hoverColor: root.urgent
                  fontFamily: root.fontFamily
                  onClicked: reader.deleteVoice(modelData.id)
                }

                Column {
                  id: voiceCol
                  anchors.left: parent.left
                  anchors.right: parent.right
                  anchors.verticalCenter: parent.verticalCenter
                  anchors.leftMargin: Style.space(8)
                  anchors.rightMargin: Style.space(36)
                  spacing: 0
                  Text {
                    width: parent.width
                    text: (root.status.voice && root.status.voice.id === modelData.id ? "● " : "  ") + modelData.name
                    color: root.foreground
                    font.family: root.fontFamily
                    font.pixelSize: Style.font.body
                    elide: Text.ElideRight
                  }
                  Text {
                    width: parent.width
                    text: modelData.mode + (modelData.speech_seconds ? " · " + Math.round(modelData.speech_seconds) + "s" : "")
                    color: root.dim
                    font.family: root.fontFamily
                    font.pixelSize: Style.font.caption
                    elide: Text.ElideRight
                  }
                }
              }
            }
          }

          Button {
            width: parent.width
            text: "Open audio file…"
            tooltipText: "Pick wav or mp3 files to clone a voice"
            foreground: root.foreground
            fontFamily: root.fontFamily
            bordered: true
            horizontalPadding: Style.space(16)
            verticalPadding: Style.space(14)
            onClicked: {
              root.close()
              reader.pickAudioFiles()
            }
          }

          PanelSeparator { foreground: root.foreground }

          PanelSectionHeader {
            text: "Model"
            foreground: root.foreground
            fontFamily: root.fontFamily
          }

          Text {
            width: parent.width
            visible: !!root.engine.recommended_reason
            text: root.engine.recommended_reason || ""
            color: root.dim
            font.family: root.fontFamily
            font.pixelSize: Style.font.bodySmall
            wrapMode: Text.WordWrap
          }

          Row {
            width: parent.width
            spacing: Style.space(8)
            Repeater {
              model: [
                { id: "auto", name: "Auto" },
                { id: "gsv-v2", name: "Passable" },
                { id: "gsv-v4", name: "High quality" }
              ]
              Button {
                text: modelData.name
                tooltipText: modelData.id === "auto"
                  ? "Pick from RAM/disk on this machine"
                  : (modelData.id === "gsv-v4" ? "GPT-SoVITS v4, ~1 GB" : "GPT-SoVITS v2, ~300 MB")
                foreground: root.foreground
                fontFamily: root.fontFamily
                bordered: true
                active: String(root.engine.configured || "") === modelData.id
                  || (modelData.id !== "auto" && String(root.engine.current_id || "") === modelData.id && String(root.engine.configured || "") === "auto")
                onClicked: reader.setEngine(modelData.id)
              }
            }
          }

          Text {
            visible: !!root.engineDownload
            width: parent.width
            text: root.engineDownload ? (root.engineDownload.message || "Downloading…") : ""
            color: root.dim
            font.family: root.fontFamily
            font.pixelSize: Style.font.bodySmall
            wrapMode: Text.WordWrap
          }

          Column {
            visible: !!root.training
            width: parent.width
            spacing: Style.space(6)
            PanelSeparator { foreground: root.foreground }
            PanelSectionHeader {
              text: "Training"
              foreground: root.foreground
              fontFamily: root.fontFamily
            }
            Text {
              width: parent.width
              text: root.training ? (root.training.message || root.training.stage) : ""
              color: root.foreground
              font.family: root.fontFamily
              font.pixelSize: Style.font.bodySmall
              wrapMode: Text.WordWrap
            }
            Rectangle {
              width: parent.width
              height: Style.space(6)
              radius: height / 2
              color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.12)
              Rectangle {
                width: parent.width * Math.max(0, Math.min(1, (root.training && root.training.percent ? root.training.percent : 0) / 100))
                height: parent.height
                radius: parent.radius
                color: root.foreground
              }
            }
          }

          Text {
            visible: root.status.can_finetune === false && !!root.status.can_finetune_reason
            width: parent.width
            text: root.status.can_finetune_reason || ""
            color: root.dim
            font.family: root.fontFamily
            font.pixelSize: Style.font.caption
            wrapMode: Text.WordWrap
          }
        }
      }
    }
  }
}