From 77430ec0d43bae362a6ed452151593ae3cab7578 Mon Sep 17 00:00:00 2001
From: jtmorris <john@jtmorris.net>
Date: Fri, 15 May 2026 19:28:37 -0700
Subject: [PATCH] fix(tailscalectl): propagate left-click through MouseArea to
 open popout

Add propagateComposedEvents and left-button handling to both
horizontal and vertical MouseArea blocks. Left-click is forwarded
to PluginComponent (mouse.accepted = false) so it opens popoutContent.
Right-click still toggles Tailscale connection.

Closes #10
---
 tailscalectl/TailscaleWidget.qml | 76 ++++++++++++++++++++++++++++++--
 1 file changed, 72 insertions(+), 4 deletions(-)

diff --git a/tailscalectl/TailscaleWidget.qml b/tailscalectl/TailscaleWidget.qml
index 6b3b95c..e8058bc 100644
--- a/tailscalectl/TailscaleWidget.qml
+++ b/tailscalectl/TailscaleWidget.qml
@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Layouts
 import qs.Common
 import qs.Services
 import qs.Widgets
@@ -12,6 +13,10 @@ PluginComponent {
     property string tailscaleIP: ""
     property string currentExitNode: ""
 
+    layerNamespacePlugin: "tailscalectl"
+    popoutWidth: 360
+    popoutHeight: 200
+
     Timer {
         interval: 5000
         running: true
@@ -68,13 +73,68 @@ PluginComponent {
         toggleProcess.running = true
     }
 
+    popoutContent: Component {
+        PopoutComponent {
+            id: popout
+            headerText: "Tailscale"
+            detailsText: root.tailscaleIP ? root.tailscaleIP : "Not connected"
+            showCloseButton: true
+
+            Column {
+                width: parent.width
+                height: parent.height - popout.headerHeight - popout.detailsHeight - Theme.spacingXL
+                anchors.top: parent.top
+                anchors.topMargin: Theme.spacingM
+                spacing: Theme.spacingM
+
+                Row {
+                    width: parent.width
+                    spacing: Theme.spacingS
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    StyledText {
+                        text: root.isConnected ? "Connected" : "Disconnected"
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: root.isConnected ? Theme.primary : Theme.surfaceVariantText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    Item { width: 1; height: 1; Layout.fillWidth: true }
+
+                    StyledText {
+                        text: "Toggle"
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+                }
+
+                StyledText {
+                    width: parent.width
+                    text: "Exit node: " + (root.currentExitNode || "None")
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceVariantText
+                    horizontalAlignment: Text.AlignHCenter
+                }
+            }
+        }
+    }
+
     horizontalBarPill: Component {
         MouseArea {
             implicitWidth: contentRow.implicitWidth
             implicitHeight: contentRow.implicitHeight
             cursorShape: Qt.PointingHandCursor
-            acceptedButtons: Qt.RightButton
-            onClicked: toggleTailscale()
+            acceptedButtons: Qt.RightButton | Qt.LeftButton
+            propagateComposedEvents: true
+            onClicked: (mouse) => {
+                if (mouse.button === Qt.RightButton) {
+                    toggleTailscale()
+                    mouse.accepted = true
+                } else {
+                    mouse.accepted = false
+                }
+            }
 
             Row {
                 id: contentRow
@@ -95,8 +155,16 @@ PluginComponent {
             implicitWidth: contentColumn.implicitWidth
             implicitHeight: contentColumn.implicitHeight
             cursorShape: Qt.PointingHandCursor
-            acceptedButtons: Qt.RightButton
-            onClicked: toggleTailscale()
+            acceptedButtons: Qt.RightButton | Qt.LeftButton
+            propagateComposedEvents: true
+            onClicked: (mouse) => {
+                if (mouse.button === Qt.RightButton) {
+                    toggleTailscale()
+                    mouse.accepted = true
+                } else {
+                    mouse.accepted = false
+                }
+            }
 
             Column {
                 id: contentColumn