dms_tailscalectl/tailscalectl/TailscaleWidget.qml

325 lines
No EOL
12 KiB
QML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import QtQuick
import QtQuick.Layouts
import qs.Common
import qs.Services
import qs.Widgets
import qs.Modules.Plugins
import Quickshell.Io
import "./lib.js" as TailscaleLib
PluginComponent {
id: root
property bool isConnected: false
property string tailscaleIP: ""
property string currentExitNode: ""
property var peers: []
property string _copyText: ""
property string _copyCurrentTool: ""
property bool _pendingToggle: false // transient one-shot for post-action verification (to be removed in first-principles refactor)
layerNamespacePlugin: "tailscalectl"
popoutWidth: 360
popoutHeight: 400
Component.onCompleted: {
// Initial status fetch on load. Subsequent fetches are on-demand (popout open, explicit refresh, or post-action verification).
statusCheck.running = true
}
Process {
id: toggleProcess
stderr: StdioCollector {}
onExited: (code, status) => {
if (code !== 0) {
var action = root.isConnected ? "disconnect" : "connect"
var detail = toggleProcess.stderr.text.trim()
ToastService.showError("tailscalectl", TailscaleLib.formatError(action, detail))
}
statusCheck.running = true
}
}
Process {
id: copyProcess
stderr: StdioCollector {}
onExited: (code, status) => {
if (code === 0) {
ToastService.showInfo(TailscaleLib.getStrings().copied(root._copyText))
} else if (root._copyCurrentTool === "dms") {
// One simple fallback attempt: try wl-copy.
root._copyCurrentTool = "wl-copy"
root._executeCopy()
} else {
var detail = copyProcess.stderr.text.trim()
ToastService.showError("tailscalectl", TailscaleLib.formatError("clipboard", detail))
}
}
}
Process {
id: exitNodeProcess
stderr: StdioCollector {}
onExited: (code, status) => {
if (code !== 0) {
var detail = exitNodeProcess.stderr.text.trim()
ToastService.showError("tailscalectl", TailscaleLib.formatError("set", detail))
}
statusCheck.running = true
}
}
Process {
id: statusCheck
command: ["tailscale", "status", "--json"]
stdout: StdioCollector {}
onExited: (code, status) => {
if (code === 0) {
const state = TailscaleLib.parseStatusResult(statusCheck.stdout.text)
root.isConnected = state.isConnected
root.tailscaleIP = state.tailscaleIP
root.currentExitNode = state.currentExitNode
root.peers = state.peers
} else {
root.isConnected = false
root.tailscaleIP = ""
root.currentExitNode = ""
root.peers = []
ToastService.showError("tailscalectl", TailscaleLib.formatError("status"))
}
// Post-action verification: if a toggle was requested, use the fresh state we just received.
if (root._pendingToggle) {
root._pendingToggle = false
toggleProcess.command = TailscaleLib.buildToggleCommand(root.isConnected)
toggleProcess.running = true
}
}
}
function toggleTailscale() {
// Post-action verification: force a fresh status check, then act on the real ground truth.
root._pendingToggle = true
statusCheck.running = true
}
function setExitNode(hostname) {
exitNodeProcess.command = TailscaleLib.makeExitNodeCommand(hostname)
exitNodeProcess.running = true
}
function copyToClipboard(text) {
root._copyText = text
// Simple two-tool fallback per first-principles plan: dms first, then wl-copy.
root._copyCurrentTool = "dms"
root._executeCopy()
}
function _executeCopy() {
var cmd = TailscaleLib.buildCopyCommand(root._copyText, root._copyCurrentTool)
if (!cmd) {
ToastService.showError("tailscalectl", TailscaleLib.formatError("clipboard"))
return
}
copyProcess.command = cmd
copyProcess.running = true
}
popoutContent: Component {
PopoutComponent {
headerText: "Tailscale"
detailsText: root.isConnected ? TailscaleLib.getStrings().connected : TailscaleLib.getStrings().disconnected
showCloseButton: true
Item {
id: contentItem
width: parent.width
height: Theme.spacingM + statusRow.implicitHeight + Theme.spacingM + peerList.height + Theme.spacingM
Row {
id: statusRow
y: Theme.spacingM
width: parent.width
spacing: Theme.spacingS
anchors.left: parent.left
anchors.leftMargin: Theme.spacingM
anchors.right: parent.right
anchors.rightMargin: Theme.spacingM
MouseArea {
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
anchors.verticalCenter: parent.verticalCenter
width: toggleIcon.implicitWidth
height: toggleIcon.implicitHeight
onClicked: {
root.toggleTailscale()
}
DankIcon {
id: toggleIcon
name: root.isConnected ? "power" : "power_off"
size: Theme.iconSize
color: Theme.primary
anchors.centerIn: parent
}
}
StyledText {
text: root.tailscaleIP || "—"
font.pixelSize: Theme.fontSizeSmall
color: Theme.primary
anchors.verticalCenter: parent.verticalCenter
}
Item { width: 1; height: 1; Layout.fillWidth: true }
StyledText {
text: TailscaleLib.getStrings().exitNodePrefix + (root.currentExitNode || TailscaleLib.getStrings().none)
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
anchors.verticalCenter: parent.verticalCenter
}
MouseArea {
visible: TailscaleLib.shouldShowClearExitNode(root.currentExitNode)
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
anchors.verticalCenter: parent.verticalCenter
width: clearExitNodeText.implicitWidth
height: clearExitNodeText.implicitHeight
onClicked: {
root.setExitNode("")
}
StyledText {
id: clearExitNodeText
text: "×"
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
}
}
}
ListView {
id: peerList
y: Theme.spacingM + statusRow.implicitHeight + Theme.spacingM
width: parent.width - Theme.spacingM * 2
height: Math.min(root.peers.length * (Theme.fontSizeSmall + Theme.spacingXS), 200)
anchors.left: parent.left
anchors.leftMargin: Theme.spacingM
model: root.peers
interactive: true
boundsBehavior: Flickable.DragAndOvershootBounds
delegate: Item {
width: peerList.width
height: Theme.fontSizeSmall + Theme.spacingXS
Row {
anchors.fill: parent
spacing: Theme.spacingS
anchors.verticalCenter: parent.verticalCenter
MouseArea {
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
anchors.verticalCenter: parent.verticalCenter
width: peerHostnameText.implicitWidth
height: peerHostnameText.implicitHeight
onClicked: {
root.copyToClipboard(modelData.hostname)
}
StyledText {
id: peerHostnameText
text: modelData.hostname
font.pixelSize: Theme.fontSizeSmall
color: modelData.online ? Theme.primary : Theme.surfaceVariantText
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
anchors.verticalCenter: parent.verticalCenter
width: peerIpText.implicitWidth
height: peerIpText.implicitHeight
onClicked: {
root.copyToClipboard(modelData.ip)
}
StyledText {
id: peerIpText
text: modelData.ip
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
}
}
MouseArea {
visible: modelData.exitNode
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
anchors.verticalCenter: parent.verticalCenter
width: exitNodeButton.implicitWidth
height: exitNodeButton.implicitHeight
onClicked: {
root.setExitNode(modelData.hostname)
}
StyledText {
id: exitNodeButton
text: "↗"
font.pixelSize: Theme.fontSizeSmall
color: TailscaleLib.isActiveExitNode(root.currentExitNode, modelData.hostname) ? Theme.primary : Theme.surfaceVariantText
}
}
}
}
}
}
}
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: {
root.toggleTailscale()
}
}
horizontalBarPill: Component {
Row {
spacing: Theme.spacingS
DankIcon {
name: root.isConnected ? "vpn_key" : "vpn_key_off"
size: Theme.iconSize
color: root.isConnected ? Theme.primary : Theme.surfaceText
}
}
}
verticalBarPill: Component {
Column {
spacing: Theme.spacingXS
DankIcon {
name: root.isConnected ? "vpn_key" : "vpn_key_off"
size: Theme.iconSize
color: root.isConnected ? Theme.primary : Theme.surfaceText
}
}
}
}