jtmorris/dms_tailscalectl
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Activity Actions

feat(tailscalectl): add bar pill with icon and right-click toggle

Browse source 
Implement connected/disconnected icon (vpn_key/vpn_key_off) in
both horizontal and vertical bar orientations. Right-click triggers
tailscale up / tailscale down via Process. Icon color follows
DMS theme (primary when connected, surfaceText when disconnected).

Closes #3
This commit is contained in:
John Morris 2026-05-15 19:14:49 -07:00
parent 778f1969e0
commit 9c691ccc64
1 changed files with 79 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
tailscalectl/TailscaleWidget.qml
View file

@ -3,21 +3,94 @@ import qs.Common
import qs.Services
import qs.Widgets
import qs.Modules.Plugins
import Quickshell.Io
PluginComponent {
id: root
property bool isConnected: false
Process {
id: toggleProcess
onExited: (code, status) => {
statusCheck.running = true
}
}
Process {
id: statusCheck
command: ["tailscale", "status", "--json"]
stdout: StdioCollector {
onStreamFinished: {
try {
const data = JSON.parse(this.text)
root.isConnected = data.BackendState === "Running"
} catch (e) {
root.isConnected = false
}
}
}
onExited: (code, status) => {
if (code !== 0) {
root.isConnected = false
}
}
}
function toggleTailscale() {
if (root.isConnected) {
toggleProcess.command = ["tailscale", "down"]
} else {
toggleProcess.command = ["tailscale", "up"]
}
toggleProcess.running = true
}
horizontalBarPill: Component {
StyledText {
text: "TS"
color: Theme.surfaceText
MouseArea {
implicitWidth: contentRow.implicitWidth
implicitHeight: contentRow.implicitHeight
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.RightButton
onClicked: toggleTailscale()
Row {
id: contentRow
spacing: Theme.spacingS
DankIcon {
name: root.isConnected ? "vpn_key" : "vpn_key_off"
size: Theme.iconSize
color: root.isConnected ? Theme.primary : Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
verticalBarPill: Component {
StyledText {
text: "TS"
color: Theme.surfaceText
MouseArea {
implicitWidth: contentColumn.implicitWidth
implicitHeight: contentColumn.implicitHeight
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.RightButton
onClicked: toggleTailscale()
Column {
id: contentColumn
spacing: Theme.spacingXS
DankIcon {
name: root.isConnected ? "vpn_key" : "vpn_key_off"
size: Theme.iconSize
color: root.isConnected ? Theme.primary : Theme.surfaceText
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
}