1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-05-11 06:49:37 -04:00

feat(tailscale): add Tailscale control center widget (#1875)

* feat(tailscale): add Tailscale control center widget

Full-stack Tailscale integration for DMS control center:

Backend (Go):
- Event-driven manager via WatchIPNBus (no polling)
- Reconnects with exponential backoff when tailscaled unavailable
- Typed conversion from ipnstate.Status to QML-friendly IPC types
- Testable via tailscaleClient interface with mock watcher
- Manager cleanup in cleanupManagers()
- 19 unit tests

Frontend (QML):
- TailscaleService with WebSocket subscription
- TailscaleWidget with peer list, filter chips, search
- Copy-to-clipboard for IPs and DNS names
- Daemon lifecycle handling (offline/stopped states)

Dependencies:
- Add tailscale.com v1.96.1 (official local API client)
- Bump Go to 1.26.1 (required by tailscale.com)

* cleanups

---------

Co-authored-by: bbedward <bbedward@gmail.com>
This commit is contained in:
Giorgio De Trane
2026-05-04 19:37:25 +02:00
committed by GitHub
parent 408beb202c
commit d223a74740
19 changed files with 2055 additions and 11 deletions

View File

@@ -0,0 +1,355 @@
import QtQuick
import QtQuick.Layouts
import Quickshell
import qs.Common
import qs.Services
import qs.Widgets
import qs.Modules.Plugins
PluginComponent {
id: root
Ref {
service: TailscaleService
}
ccWidgetIcon: "device_hub"
ccWidgetPrimaryText: I18n.tr("Tailscale", "Tailscale mesh VPN widget title")
ccWidgetSecondaryText: {
if (!TailscaleService.available)
return I18n.tr("Not available", "Tailscale service not available");
if (!TailscaleService.connected)
return I18n.tr("Disconnected", "Tailscale disconnected status");
const count = TailscaleService.onlinePeerCount;
return I18n.tr("%1 online", "Number of online Tailscale peers").arg(count);
}
ccWidgetIsActive: TailscaleService.connected
onCcWidgetToggled: {}
ccDetailContent: Component {
Rectangle {
id: detailRoot
property string searchQuery: ""
property int filterIndex: 0 // 0=My Online, 1=All Online, 2=All
property string expandedHostname: ""
implicitHeight: detailColumn.implicitHeight + Theme.spacingM * 2
radius: Theme.cornerRadius
color: Theme.surfaceContainerHigh
Column {
id: detailColumn
anchors.fill: parent
anchors.margins: Theme.spacingM
spacing: Theme.spacingS
// Not available state
Column {
visible: !TailscaleService.available
width: parent.width
spacing: Theme.spacingS
Item {
width: parent.width
height: 80
Column {
anchors.centerIn: parent
spacing: Theme.spacingS
DankIcon {
name: "vpn_key_off"
size: 36
color: Theme.surfaceVariantText
anchors.horizontalCenter: parent.horizontalCenter
}
StyledText {
text: I18n.tr("Tailscale not available", "Warning when Tailscale service is not running")
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceVariantText
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
// Connected content
Item {
visible: TailscaleService.available
width: parent.width
height: parent.height - (parent.visibleChildren[0] === this ? 0 : y)
clip: true
Column {
id: headerColumn
width: parent.width
spacing: Theme.spacingS
// Search bar + refresh button
RowLayout {
width: parent.width
spacing: Theme.spacingS
DankTextField {
Layout.fillWidth: true
placeholderText: I18n.tr("Search devices...", "Tailscale device search placeholder")
leftIconName: "search"
showClearButton: true
text: detailRoot.searchQuery
onTextEdited: detailRoot.searchQuery = text
}
DankActionButton {
iconName: "sync"
buttonSize: 28
iconSize: 16
iconColor: Theme.surfaceVariantText
tooltipText: I18n.tr("Refresh", "Refresh Tailscale device status")
onClicked: TailscaleService.refresh(null)
}
}
// Filter chips
DankFilterChips {
width: parent.width
currentIndex: detailRoot.filterIndex
showCounts: true
chipHeight: 26
model: [
{
"label": I18n.tr("My Online", "Tailscale filter: my online devices"),
"count": TailscaleService.myOnlinePeers.length
},
{
"label": I18n.tr("Online", "Tailscale filter: all online devices"),
"count": TailscaleService.onlinePeers.length
},
{
"label": I18n.tr("All", "Tailscale filter: all devices"),
"count": TailscaleService.allPeersList.length
}
]
onSelectionChanged: index => {
detailRoot.filterIndex = index;
}
}
}
// Scrollable peer list — fills remaining space below header
DankFlickable {
anchors.top: headerColumn.bottom
anchors.topMargin: Theme.spacingS
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
contentHeight: peerListColumn.implicitHeight
clip: true
Column {
id: peerListColumn
width: parent.width
spacing: Theme.spacingXS
property var filteredPeers: {
let base;
switch (detailRoot.filterIndex) {
case 0:
base = TailscaleService.myOnlinePeers;
break;
case 1:
base = TailscaleService.onlinePeers;
break;
case 2:
base = TailscaleService.allPeersList;
break;
default:
base = [];
}
if (detailRoot.searchQuery.length > 0)
return TailscaleService.searchPeers(detailRoot.searchQuery, base);
return base;
}
// Empty state
Item {
width: parent.width
height: 60
visible: peerListColumn.filteredPeers.length === 0
Column {
anchors.centerIn: parent
spacing: Theme.spacingXS
DankIcon {
name: "devices"
size: 28
color: Theme.surfaceVariantText
anchors.horizontalCenter: parent.horizontalCenter
}
StyledText {
text: detailRoot.searchQuery.length > 0 ? I18n.tr("No matching devices", "No Tailscale devices match search") : I18n.tr("No peers found", "No Tailscale peers found")
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Peer cards
Repeater {
model: peerListColumn.filteredPeers
delegate: Rectangle {
required property var modelData
required property int index
width: peerListColumn.width
height: peerCardColumn.implicitHeight + Theme.spacingS * 2
radius: Theme.cornerRadius
color: modelData.hostname === (TailscaleService.selfNode ? TailscaleService.selfNode.hostname : "") ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHighest
property bool isSelf: modelData.hostname === (TailscaleService.selfNode ? TailscaleService.selfNode.hostname : "")
property bool isExpanded: detailRoot.expandedHostname === modelData.hostname
Column {
id: peerCardColumn
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: Theme.spacingS
spacing: 2
RowLayout {
width: parent.width
spacing: Theme.spacingS
Rectangle {
width: 8
height: 8
radius: 4
color: modelData.online ? "#4caf50" : Theme.surfaceVariantText
Layout.alignment: Qt.AlignVCenter
}
StyledText {
text: modelData.hostname || ""
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Bold
color: Theme.surfaceText
Layout.fillWidth: true
elide: Text.ElideRight
}
StyledText {
visible: isSelf
text: I18n.tr("This device", "Label for the user's own device in Tailscale")
font.pixelSize: 10
color: Theme.primary
font.weight: Font.Medium
}
}
RowLayout {
width: parent.width
spacing: Theme.spacingXS
StyledText {
text: modelData.tailscaleIp || ""
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceTextMedium
Layout.fillWidth: true
}
DankActionButton {
iconName: "content_copy"
buttonSize: 20
iconSize: 11
iconColor: Theme.surfaceVariantText
tooltipText: I18n.tr("Copy", "Copy to clipboard")
onClicked: Quickshell.execDetached(["dms", "cl", "copy", modelData.tailscaleIp])
}
}
StyledText {
text: {
const parts = [];
if (modelData.os)
parts.push(modelData.os);
if (modelData.online) {
parts.push(modelData.relay ? I18n.tr("relay: %1", "Tailscale relay server name").arg(modelData.relay) : I18n.tr("direct", "Tailscale direct connection"));
} else if (modelData.lastSeen) {
parts.push(I18n.tr("last seen %1", "Tailscale peer last seen time").arg(modelData.lastSeen));
}
return parts.join(" \u2022 ");
}
font.pixelSize: 10
color: Theme.surfaceVariantText
width: parent.width
elide: Text.ElideRight
}
// Expanded: DNS name + copy, tags, owner
Column {
visible: isExpanded
width: parent.width
spacing: 2
topPadding: 4
RowLayout {
width: parent.width
spacing: Theme.spacingXS
visible: (modelData.dnsName || "").length > 0
StyledText {
text: modelData.dnsName || ""
font.pixelSize: 10
color: Theme.surfaceVariantText
Layout.fillWidth: true
elide: Text.ElideRight
}
DankActionButton {
iconName: "content_copy"
buttonSize: 20
iconSize: 11
iconColor: Theme.surfaceVariantText
onClicked: Quickshell.execDetached(["dms", "cl", "copy", modelData.dnsName])
}
}
StyledText {
visible: (modelData.tags || []).length > 0
text: I18n.tr("Tags: %1", "Tailscale device tags").arg((modelData.tags || []).join(", "))
font.pixelSize: 10
color: Theme.surfaceVariantText
}
StyledText {
visible: (modelData.owner || "").length > 0
text: I18n.tr("Owner: %1", "Tailscale device owner").arg(modelData.owner || "")
font.pixelSize: 10
color: Theme.surfaceVariantText
}
}
}
MouseArea {
z: -1
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: detailRoot.expandedHostname = (detailRoot.expandedHostname === modelData.hostname) ? "" : modelData.hostname
}
}
}
}
}
}
}
}
}
}

View File

@@ -22,6 +22,7 @@ Item {
case section === "wifi":
case section === "bluetooth":
case section === "builtin_vpn":
case section === "builtin_tailscale":
return Math.min(350, maxAvailableHeight);
case section.startsWith("brightnessSlider_"):
return Math.min(400, maxAvailableHeight);
@@ -128,6 +129,12 @@ Item {
}
builtinInstance = widgetModel.cupsBuiltinInstance;
}
if (builtinId === "builtin_tailscale") {
if (widgetModel?.tailscaleLoader) {
widgetModel.tailscaleLoader.active = true;
}
builtinInstance = widgetModel.tailscaleBuiltinInstance;
}
if (!builtinInstance || !builtinInstance.ccDetailContent) {
return;

View File

@@ -918,6 +918,12 @@ Column {
}
builtinInstance = Qt.binding(() => root.model?.cupsBuiltinInstance);
}
if (id === "builtin_tailscale") {
if (root.model?.tailscaleLoader) {
root.model.tailscaleLoader.active = true;
}
builtinInstance = Qt.binding(() => root.model?.tailscaleBuiltinInstance);
}
}
sourceComponent: {

View File

@@ -10,6 +10,7 @@ QtObject {
property var vpnBuiltinInstance: null
property var cupsBuiltinInstance: null
property var tailscaleBuiltinInstance: null
property var vpnLoader: Loader {
active: false
@@ -63,6 +64,35 @@ QtObject {
}
}
property var tailscaleLoader: Loader {
active: false
sourceComponent: Component {
TailscaleWidget {}
}
onItemChanged: {
root.tailscaleBuiltinInstance = item;
}
onActiveChanged: {
if (!active) {
root.tailscaleBuiltinInstance = null;
}
}
Connections {
target: SettingsData
function onControlCenterWidgetsChanged() {
const widgets = SettingsData.controlCenterWidgets || [];
const hasTailscaleWidget = widgets.some(w => w.id === "builtin_tailscale");
if (!hasTailscaleWidget && tailscaleLoader.active) {
root.log.debug("No Tailscale widget in control center, deactivating loader");
tailscaleLoader.active = false;
}
}
}
}
readonly property var coreWidgetDefinitions: [
{
"id": "nightMode",
@@ -202,6 +232,16 @@ QtObject {
"enabled": CupsService.available,
"warning": !CupsService.available ? I18n.tr("CUPS not available") : undefined,
"isBuiltinPlugin": true
},
{
"id": "builtin_tailscale",
"text": I18n.tr("Tailscale", "Tailscale mesh VPN widget title"),
"description": I18n.tr("Tailscale Network", "Tailscale control center widget description"),
"icon": "device_hub",
"type": "builtin_plugin",
"enabled": TailscaleService.available,
"warning": !TailscaleService.available ? I18n.tr("Tailscale not available", "Warning when Tailscale service is not running") : undefined,
"isBuiltinPlugin": true
}
]

View File

@@ -64,6 +64,7 @@ Singleton {
signal clipboardStateUpdate(var data)
signal locationStateUpdate(var data)
signal sysupdateStateUpdate(var data)
signal tailscaleStateUpdate(var data)
property bool capsLockState: false
property bool screensaverInhibited: false
@@ -398,6 +399,8 @@ Singleton {
locationStateUpdate(data);
} else if (service === "sysupdate") {
sysupdateStateUpdate(data);
} else if (service === "tailscale") {
tailscaleStateUpdate(data);
}
}

View File

@@ -0,0 +1,181 @@
pragma Singleton
pragma ComponentBehavior: Bound
import QtQuick
import Quickshell
import qs.Common
Singleton {
id: root
readonly property var log: Log.scoped("TailscaleService")
property int refCount: 0
onRefCountChanged: {
if (refCount > 0) {
ensureSubscription();
} else if (refCount === 0 && DMSService.activeSubscriptions.includes("tailscale")) {
DMSService.removeSubscription("tailscale");
}
}
function ensureSubscription() {
if (refCount <= 0)
return;
if (!DMSService.isConnected)
return;
if (DMSService.activeSubscriptions.includes("tailscale"))
return;
if (DMSService.activeSubscriptions.includes("all"))
return;
DMSService.addSubscription("tailscale");
if (available) {
getStatus();
}
}
property bool connected: false
property string version: ""
property string backendState: ""
property string magicDnsSuffix: ""
property string tailnetName: ""
property var selfNode: null
property var peers: []
property bool available: false
property bool stateInitialized: false
readonly property var allPeersList: {
const result = [];
if (selfNode)
result.push(selfNode);
if (peers)
result.push(...peers);
return result;
}
readonly property var onlinePeers: allPeersList.filter(p => p.online)
readonly property var myPeers: {
if (!selfNode)
return allPeersList;
return allPeersList.filter(p => isMine(p));
}
readonly property var myOnlinePeers: {
if (!selfNode)
return onlinePeers;
return allPeersList.filter(p => p.online && isMine(p));
}
readonly property int onlinePeerCount: onlinePeers.length
readonly property string socketPath: Quickshell.env("DMS_SOCKET")
Component.onCompleted: {
if (socketPath && socketPath.length > 0) {
checkDMSCapabilities();
}
}
Connections {
target: DMSService
function onConnectionStateChanged() {
if (DMSService.isConnected) {
checkDMSCapabilities();
ensureSubscription();
}
}
}
Connections {
target: DMSService
enabled: DMSService.isConnected
function onTailscaleStateUpdate(data) {
root.log.debug("Subscription update received");
updateState(data);
}
function onCapabilitiesReceived() {
checkDMSCapabilities();
}
}
function checkDMSCapabilities() {
if (!DMSService.isConnected)
return;
if (DMSService.capabilities.length === 0)
return;
const wasAvailable = available;
available = DMSService.capabilities.includes("tailscale");
if (!available)
return;
if (!stateInitialized) {
stateInitialized = true;
getStatus();
}
if (!wasAvailable)
ensureSubscription();
}
function getStatus() {
if (!available)
return;
DMSService.sendRequest("tailscale.getStatus", null, response => {
if (response.result) {
updateState(response.result);
}
});
}
function updateState(data) {
if (!data)
return;
connected = data.connected || false;
version = data.version || "";
backendState = data.backendState || "";
magicDnsSuffix = data.magicDnsSuffix || "";
tailnetName = data.tailnetName || "";
selfNode = data.self || null;
peers = data.peers || [];
}
function refresh(callback) {
if (!available)
return;
DMSService.sendRequest("tailscale.refresh", null, response => {
if (callback)
callback(response);
});
}
function isMine(peer) {
const myOwner = selfNode ? (selfNode.owner || "") : "";
if (peer.owner === myOwner && myOwner !== "")
return true;
if (peer.tags && peer.tags.length > 0)
return true;
return false;
}
function searchPeers(query, list) {
const base = list || allPeersList;
if (!query || query.length === 0)
return base;
const q = query.toLowerCase();
return base.filter(p => {
if (p.hostname && p.hostname.toLowerCase().includes(q))
return true;
if (p.dnsName && p.dnsName.toLowerCase().includes(q))
return true;
if (p.tailscaleIp && p.tailscaleIp.includes(q))
return true;
if (p.os && p.os.toLowerCase().includes(q))
return true;
return false;
});
}
}

View File

@@ -14764,5 +14764,107 @@
"context": "↑/↓: Navigate • Enter: Paste • Del: Delete • F10: Help",
"reference": "Modals/Clipboard/ClipboardKeyboardHints.qml:30",
"comment": "Keyboard hints when enter-to-paste is enabled"
},
{
"term": "Tailscale",
"context": "Tailscale mesh VPN widget title",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml, Modules/ControlCenter/Models/WidgetModel.qml",
"comment": ""
},
{
"term": "Tailscale Network",
"context": "Tailscale control center widget description",
"reference": "Modules/ControlCenter/Models/WidgetModel.qml",
"comment": ""
},
{
"term": "Tailscale not available",
"context": "Warning when Tailscale service is not running",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml, Modules/ControlCenter/Models/WidgetModel.qml",
"comment": ""
},
{
"term": "%1 online",
"context": "Number of online Tailscale peers",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
},
{
"term": "Search devices...",
"context": "Tailscale device search placeholder",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
},
{
"term": "This device",
"context": "Label for the user's own device in Tailscale",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
},
{
"term": "Network: %1",
"context": "Tailscale network name",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
},
{
"term": "Version: %1",
"context": "Tailscale version",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
},
{
"term": "No matching devices",
"context": "No Tailscale devices match search",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
},
{
"term": "No peers found",
"context": "No Tailscale peers found",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
},
{
"term": "relay: %1",
"context": "Tailscale relay server name",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
},
{
"term": "direct",
"context": "Tailscale direct connection",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
},
{
"term": "last seen %1",
"context": "Tailscale peer last seen time",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
},
{
"term": "Tags: %1",
"context": "Tailscale device tags",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
},
{
"term": "Owner: %1",
"context": "Tailscale device owner",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
},
{
"term": "Show my online devices",
"context": "Toggle to show only online devices owned by the user",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
},
{
"term": "Show all devices (%1)",
"context": "Toggle to show all Tailscale devices",
"reference": "Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml",
"comment": ""
}
]

View File

@@ -17225,5 +17225,124 @@
"context": "Keyboard hints when enter-to-paste is enabled",
"reference": "",
"comment": ""
},
{
"term": "Tailscale",
"translation": "",
"context": "Tailscale mesh VPN widget title",
"reference": "",
"comment": ""
},
{
"term": "Tailscale Network",
"translation": "",
"context": "Tailscale control center widget description",
"reference": "",
"comment": ""
},
{
"term": "Tailscale not available",
"translation": "",
"context": "Warning when Tailscale service is not running",
"reference": "",
"comment": ""
},
{
"term": "%1 online",
"translation": "",
"context": "Number of online Tailscale peers",
"reference": "",
"comment": ""
},
{
"term": "Search devices...",
"translation": "",
"context": "Tailscale device search placeholder",
"reference": "",
"comment": ""
},
{
"term": "This device",
"translation": "",
"context": "Label for the user's own device in Tailscale",
"reference": "",
"comment": ""
},
{
"term": "Network: %1",
"translation": "",
"context": "Tailscale network name",
"reference": "",
"comment": ""
},
{
"term": "Version: %1",
"translation": "",
"context": "Tailscale version",
"reference": "",
"comment": ""
},
{
"term": "No matching devices",
"translation": "",
"context": "No Tailscale devices match search",
"reference": "",
"comment": ""
},
{
"term": "No peers found",
"translation": "",
"context": "No Tailscale peers found",
"reference": "",
"comment": ""
},
{
"term": "relay: %1",
"translation": "",
"context": "Tailscale relay server name",
"reference": "",
"comment": ""
},
{
"term": "direct",
"translation": "",
"context": "Tailscale direct connection",
"reference": "",
"comment": ""
},
{
"term": "last seen %1",
"translation": "",
"context": "Tailscale peer last seen time",
"reference": "",
"comment": ""
},
{
"term": "Tags: %1",
"translation": "",
"context": "Tailscale device tags",
"reference": "",
"comment": ""
},
{
"term": "Owner: %1",
"translation": "",
"context": "Tailscale device owner",
"reference": "",
"comment": ""
},
{
"term": "Show my online devices",
"translation": "",
"context": "Toggle to show only online devices owned by the user",
"reference": "",
"comment": ""
},
{
"term": "Show all devices (%1)",
"translation": "",
"context": "Toggle to show all Tailscale devices",
"reference": "",
"comment": ""
}
]