diff --git a/shell/plugins/README.md b/shell/plugins/README.md index fa65c49d..fc411785 100644 --- a/shell/plugins/README.md +++ b/shell/plugins/README.md @@ -25,6 +25,7 @@ User-installed plugins live alongside these conceptually but on disk under | Monitor | `omarchy.monitor` | `bar-widget` | `panels/monitor/Panel.qml` | | Network | `omarchy.network` | `bar-widget` | `panels/network/Panel.qml` | | Power | `omarchy.power` | `bar-widget` | `panels/power/Panel.qml` | +| Tailscale | `omarchy.tailscale` | `bar-widget` | `tailscale/Widget.qml` | | Weather | `omarchy.weather` | `bar-widget` | `panels/weather/BarWidget.qml` | | Media | `omarchy.media` | `service`, `bar-widget` | `services/media/Service.qml`, `services/media/BarWidget.qml` | | Battery | `omarchy.battery` | `service` | `services/battery/Service.qml` | diff --git a/shell/plugins/bar/README.md b/shell/plugins/bar/README.md index 2363b740..ab7d8d90 100644 --- a/shell/plugins/bar/README.md +++ b/shell/plugins/bar/README.md @@ -8,7 +8,7 @@ the shell for its whole session. - `manifest.json` declares the plugin (`id: omarchy.bar`, `kind: bar`) and points at `Bar.qml` as the entry point. - `Bar.qml` is Omarchy-owned bar engine code, loaded by the omarchy-shell host. Users should not edit it directly. - `widgets/` holds simple first-party bar widgets with sibling manifests. -- Feature plugins such as `../panels/audio/`, `../panels/network/`, and `../panels/power/` provide richer popup bar widgets. +- Feature plugins such as `../panels/audio/`, `../panels/network/`, `../panels/power/`, and `../tailscale/` provide richer popup bar plugins. - The bar receives its config from the host shell as a `barConfig` property; the host loads it from `~/.config/omarchy/shell.json` (or `config/omarchy/shell.json` when the user has no file). - `omarchy-style-bar-position` updates only the user shell.json file. @@ -68,6 +68,7 @@ Example `shell.json` (bar subtree only shown): | `omarchy.audio` | Volume icon + popup with master slider, output-device picker, per-app mixer | left = popup · right = mute · middle = popup · scroll = volume | | `omarchy.network` | Wi-Fi/Ethernet icon + popup with Wi-Fi scan, signal, connect, DNS provider selection | left = popup · right = nmtui | +| `omarchy.tailscale` | Tailscale status, account switcher, peer browser, and copy actions | left = popup · right = toggle · middle = refresh | | `omarchy.power` | Battery/AC icon + popup with battery stats, power profiles, and system info | left = popup | | `omarchy.bluetooth` | Bluetooth icon + popup with device list, connect/disconnect, battery | left = popup · right = toggle radio · middle = bluetoothctl TUI | | `omarchy.monitor` | Brightness and laptop display controls | left = popup | @@ -167,8 +168,8 @@ Widgets receive `bar` (the shell root), `moduleName` (string), and `settings` (o First-party bar widgets are manifest-backed just like third-party widgets. Simple widgets carry sibling manifests such as `widgets/Clock.manifest.json`; -richer popup widgets live in feature directories such as `../panels/audio/` and -`../panels/network/`; and feature plugins such as `omarchy.menu`, `omarchy.media`, and +richer popup plugins live in feature directories such as `../panels/audio/`, +`../panels/network/`, and `../tailscale/`; and feature plugins such as `omarchy.menu`, `omarchy.media`, and `omarchy.notifications` declare their bar-widget entry points in their own `manifest.json`. Bar layout ids are namespaced, e.g. `omarchy.audio`, `omarchy.network`, and `omarchy.clock`. Older UpperCamelCase ids such as diff --git a/shell/plugins/tailscale/Main.qml b/shell/plugins/tailscale/Main.qml new file mode 100644 index 00000000..d081afae --- /dev/null +++ b/shell/plugins/tailscale/Main.qml @@ -0,0 +1,497 @@ +import QtQuick +import Quickshell +import Quickshell.Io +import qs.Commons + +Item { + id: root + visible: false + + property var settings: ({}) + + property bool installed: false + property bool running: false + property bool needsLogin: false + property bool refreshing: false + property string backendState: "Unknown" + property string statusText: "Checking…" + property string selfName: "" + property string selfDnsName: "" + property string selfIp: "" + property string authUrl: "" + property var peers: [] + property var accounts: [] + property string selectedAccountId: "" + property string selectedAccountLabel: "" + property string actionStatus: "" + property string lastError: "" + + readonly property int refreshIntervalSec: intSetting("refreshIntervalSec", 30, 5, 3600) + readonly property bool busy: whichProcess.running || statusProcess.running || accountsProcess.running || actionProcess.running || loginProcess.running || switchProcess.running + + property string _statusOutput: "" + property string _statusError: "" + property string _accountsOutput: "" + property string _actionOutput: "" + property string _actionError: "" + property string _loginOutput: "" + property string _loginError: "" + property bool _loginInProgress: false + property bool _loginUrlOpened: false + property string _preLoginAuthUrl: "" + property double _lastAccountsRefreshMs: 0 + property string _switchOutput: "" + property string _switchError: "" + + function setting(name, fallback) { + var value = settings ? settings[name] : undefined + return value === undefined || value === null ? fallback : value + } + + function intSetting(name, fallback, min, max) { + var n = parseInt(String(setting(name, fallback)), 10) + if (!isFinite(n)) n = fallback + if (n < min) n = min + if (n > max) n = max + return n + } + + function filterIPv4(ips) { + var result = [] + if (!ips || typeof ips.length !== "number") return result + for (var i = 0; i < ips.length; i++) { + var ip = String(ips[i] || "") + if (/^100\./.test(ip)) result.push(ip) + } + return result + } + + function cleanDnsName(name) { + var value = String(name || "") + return value.charAt(value.length - 1) === "." ? value.slice(0, -1) : value + } + + function shortDnsName(name) { + var clean = cleanDnsName(name) + if (clean === "") return "" + return clean.split(".")[0] || clean + } + + function displayHostName(hostName, dnsName) { + var host = String(hostName || "") + if (host !== "" && host.toLowerCase() !== "localhost") return host + return shortDnsName(dnsName) || host || "Unknown" + } + + function osIcon(os) { + var value = String(os || "").toLowerCase() + if (value === "linux") return "󰌽" + if (value === "macos" || value === "ios") return "󰀵" + if (value === "windows") return "󰍲" + if (value === "android") return "󰀲" + return "󰟀" + } + + function accountLabel(account) { + if (!account) return "Unknown account" + var parts = [] + if (account.nickname) parts.push(String(account.nickname)) + if (account.tailnet && String(account.tailnet) !== String(account.nickname || "")) parts.push(String(account.tailnet)) + if (account.account) parts.push(String(account.account)) + return parts.length > 0 ? parts.join(" · ") : String(account.id || "Unknown account") + } + + function copyToClipboard(value, label) { + var text = String(value || "") + if (text === "") return + Quickshell.execDetached(["bash", "-c", "printf %s " + Util.shellQuote(text) + " | wl-copy"]) + actionStatus = elideStatus("Copied " + (label || text)) + actionStatusTimer.restart() + } + + function copyPeerIp(peer) { + if (!peer) return + var ips = filterIPv4(peer.TailscaleIPs || []) + copyToClipboard(ips.length > 0 ? ips[0] : "", displayHostName(peer.HostName, peer.DNSName) + " IP") + } + + function copyPeerName(peer) { + if (!peer) return + copyToClipboard(displayHostName(peer.HostName, peer.DNSName), displayHostName(peer.HostName, peer.DNSName) + " name") + } + + function copyPeerDnsName(peer) { + if (!peer) return + copyToClipboard(cleanDnsName(peer.DNSName), displayHostName(peer.HostName, peer.DNSName) + " DNS name") + } + + function refresh(forceAccounts) { + if (installed) { + refreshStatusAndAccounts(forceAccounts === true) + return + } + if (!whichProcess.running) { + refreshing = true + whichProcess.command = ["which", "tailscale"] + whichProcess.running = true + } + } + + function refreshStatusAndAccounts(forceAccounts) { + if (!installed) return + if (!statusProcess.running) { + _statusOutput = "" + _statusError = "" + refreshing = true + statusProcess.command = ["tailscale", "status", "--json"] + statusProcess.running = true + } + var now = Date.now() + var shouldRefreshAccounts = forceAccounts === true || accounts.length === 0 || now - _lastAccountsRefreshMs > 60000 + if (shouldRefreshAccounts && !accountsProcess.running) { + _accountsOutput = "" + _lastAccountsRefreshMs = now + accountsProcess.command = ["tailscale", "switch", "--list", "--json"] + accountsProcess.running = true + } + } + + function elideStatus(text) { + var value = String(text || "").replace(/\s+/g, " ").trim() + return value.length > 140 ? value.substring(0, 137) + "…" : value + } + + function resetUnavailable(message) { + running = false + needsLogin = false + backendState = "Unavailable" + statusText = message + selfName = "" + selfDnsName = "" + selfIp = "" + authUrl = "" + peers = [] + accounts = [] + selectedAccountId = "" + selectedAccountLabel = "" + } + + function parseStatus(raw) { + var text = String(raw || "").trim() + if (text === "") { + resetUnavailable("Disconnected") + return + } + + try { + var data = JSON.parse(text) + backendState = String(data.BackendState || "Unknown") + running = backendState === "Running" + needsLogin = backendState === "NeedsLogin" + authUrl = String(data.AuthURL || "") + if (needsLogin && _loginInProgress && !_loginUrlOpened && authUrl !== "" && authUrl !== _preLoginAuthUrl) { + openAuthUrlFrom(authUrl, false) + } + + var self = data.Self || {} + selfName = displayHostName(self.HostName, self.DNSName) + selfDnsName = cleanDnsName(self.DNSName) + var selfIps = filterIPv4(self.TailscaleIPs || data.TailscaleIPs || []) + selfIp = selfIps.length > 0 ? selfIps[0] : "" + + var nextPeers = [] + var rawPeers = data.Peer || {} + for (var id in rawPeers) { + var peer = rawPeers[id] || {} + var ipv4s = filterIPv4(peer.TailscaleIPs || []) + nextPeers.push({ + id: id, + HostName: displayHostName(peer.HostName, peer.DNSName), + DNSName: cleanDnsName(peer.DNSName), + TailscaleIPs: ipv4s, + Online: peer.Online === true, + OS: String(peer.OS || ""), + Tags: peer.Tags || [], + ExitNodeOption: peer.ExitNodeOption === true, + ExitNode: peer.ExitNode === true + }) + } + nextPeers.sort(function(a, b) { + if (a.Online !== b.Online) return a.Online ? -1 : 1 + return String(a.HostName).localeCompare(String(b.HostName)) + }) + peers = nextPeers + + if (needsLogin) statusText = "Needs login" + else if (running) { + statusText = "Connected" + _loginInProgress = false + _loginUrlOpened = false + _preLoginAuthUrl = "" + loginTimeoutTimer.stop() + } else if (backendState === "Stopped") statusText = "Disconnected" + else statusText = backendState + lastError = "" + } catch (e) { + resetUnavailable("Status error") + lastError = "Failed to parse tailscale status" + console.warn("tailscale", lastError, e) + } + } + + function parseAccounts(raw) { + var text = String(raw || "").trim() + if (text === "") { + accounts = [] + selectedAccountId = "" + selectedAccountLabel = "" + return + } + + try { + var parsed = JSON.parse(text) + var next = [] + var selected = null + if (parsed && typeof parsed.length === "number") { + for (var i = 0; i < parsed.length; i++) { + var raw = parsed[i] || {} + var account = { + id: String(raw.id || raw.ID || ""), + nickname: String(raw.nickname || raw.Nickname || raw.name || raw.Name || ""), + tailnet: String(raw.tailnet || raw.Tailnet || ""), + account: String(raw.account || raw.Account || raw.loginName || raw.LoginName || raw.user || raw.User || ""), + selected: raw.selected === true || raw.Selected === true + } + next.push(account) + if (account.selected === true) selected = account + } + } + accounts = next + selectedAccountId = selected ? String(selected.id || "") : "" + selectedAccountLabel = selected ? accountLabel(selected) : "" + } catch (e) { + accounts = [] + selectedAccountId = "" + selectedAccountLabel = "" + console.warn("tailscale", "Failed to parse account list", e) + } + } + + function toggleTailscale() { + if (!installed) return + if (running) { + runAction(["tailscale", "down"], "Turning Tailscale off…") + } else { + loginOrUp() + } + } + + function loginOrUp() { + if (!installed || loginProcess.running) return + _loginOutput = "" + _loginError = "" + actionStatus = needsLogin ? "Starting Tailscale login…" : "Turning Tailscale on…" + _loginInProgress = needsLogin + _loginUrlOpened = false + _preLoginAuthUrl = authUrl + var command = ["tailscale", "up"] + if (needsLogin) command.push("--force-reauth") + loginProcess.command = command + loginProcess.running = true + if (needsLogin) loginTimeoutTimer.restart() + } + + function switchAccount(id) { + var accountId = String(id || "") + if (!installed || accountId === "" || accountId === selectedAccountId || switchProcess.running) return + _switchOutput = "" + _switchError = "" + actionStatus = "Switching Tailscale account…" + switchProcess.command = ["tailscale", "switch", accountId] + switchProcess.running = true + } + + function runAction(command, label) { + if (actionProcess.running) return + _actionOutput = "" + _actionError = "" + actionStatus = label || "Working…" + actionProcess.command = command + actionProcess.running = true + } + + function openAuthUrlFrom(text, allowFallback) { + if (_loginUrlOpened) return true + var match = String(text || "").match(/https?:\/\/\S+/) + var url = match && match[0] ? match[0] : (allowFallback === true ? authUrl : "") + if (url !== "") { + _loginUrlOpened = true + _loginInProgress = false + loginTimeoutTimer.stop() + Qt.openUrlExternally(url) + actionStatus = "Opened login link" + actionStatusTimer.restart() + return true + } + return false + } + + function handleLoginOutput(data, isError) { + var text = String(data || "") + if (isError) _loginError += text + "\n" + else _loginOutput += text + "\n" + if (_loginInProgress && !_loginUrlOpened) openAuthUrlFrom(text, false) + } + + Timer { + id: refreshTimer + interval: root.refreshIntervalSec * 1000 + repeat: true + running: true + triggeredOnStart: true + onTriggered: root.refresh() + } + + Timer { + id: delayedRefresh + interval: 600 + repeat: false + onTriggered: root.refresh() + } + + Timer { + id: actionStatusTimer + interval: 2200 + repeat: false + onTriggered: root.actionStatus = "" + } + + Timer { + id: loginTimeoutTimer + interval: 10000 + repeat: false + onTriggered: { + if (!root._loginInProgress || root._loginUrlOpened) return + if (!root.openAuthUrlFrom(root.authUrl, true)) { + root._loginInProgress = false + root.actionStatus = "Tailscale login link not available yet" + } + } + } + + Process { + id: whichProcess + running: false + command: [] + onExited: function(exitCode) { + root.installed = exitCode === 0 + if (root.installed) root.refreshStatusAndAccounts() + else { + root.refreshing = false + root.resetUnavailable("Not installed") + } + } + } + + Process { + id: statusProcess + running: false + command: [] + stdout: StdioCollector { id: statusStdout; waitForEnd: true; onStreamFinished: root._statusOutput = text } + stderr: StdioCollector { id: statusStderr; waitForEnd: true; onStreamFinished: root._statusError = text } + onExited: function(exitCode) { + root.refreshing = false + var stdout = String(statusStdout.text || root._statusOutput || "") + var stderr = String(statusStderr.text || root._statusError || "") + if (exitCode === 0) root.parseStatus(stdout) + else { + root.resetUnavailable("Disconnected") + root.lastError = stderr.trim() + } + } + } + + Process { + id: accountsProcess + running: false + command: [] + stdout: StdioCollector { id: accountsStdout; waitForEnd: true; onStreamFinished: root._accountsOutput = text } + onExited: function(exitCode) { + var stdout = String(accountsStdout.text || root._accountsOutput || "") + if (exitCode === 0) root.parseAccounts(stdout) + else root.parseAccounts("") + } + } + + Process { + id: actionProcess + running: false + command: [] + stdout: StdioCollector { id: actionStdout; waitForEnd: true; onStreamFinished: root._actionOutput = text } + stderr: StdioCollector { id: actionStderr; waitForEnd: true; onStreamFinished: root._actionError = text } + onExited: function(exitCode) { + var stdout = String(actionStdout.text || root._actionOutput || "") + var stderr = String(actionStderr.text || root._actionError || "") + if (exitCode !== 0) { + root.lastError = elideStatus(stderr || stdout || "Tailscale command failed") + root.actionStatus = root.lastError + } else { + root.lastError = "" + root.actionStatus = "" + } + delayedRefresh.restart() + } + } + + Process { + id: loginProcess + running: false + command: [] + stdout: SplitParser { onRead: function(data) { root.handleLoginOutput(data, false) } } + stderr: SplitParser { onRead: function(data) { root.handleLoginOutput(data, true) } } + onExited: function(exitCode) { + var combined = String(root._loginOutput || "") + "\n" + String(root._loginError || "") + var opened = root.openAuthUrlFrom(combined, true) + if (exitCode !== 0 && !opened) { + root._loginInProgress = false + root.lastError = elideStatus(combined || "tailscale up failed") + root.actionStatus = root.lastError + } else if (!opened) { + root.lastError = "" + root.actionStatus = "" + } + delayedRefresh.restart() + } + } + + Process { + id: switchProcess + running: false + command: [] + stdout: StdioCollector { id: switchStdout; waitForEnd: true; onStreamFinished: root._switchOutput = text } + stderr: StdioCollector { id: switchStderr; waitForEnd: true; onStreamFinished: root._switchError = text } + onExited: function(exitCode) { + var stdout = String(switchStdout.text || root._switchOutput || "") + var stderr = String(switchStderr.text || root._switchError || "") + if (exitCode !== 0) { + root.lastError = elideStatus(stderr || stdout || "Account switch failed") + root.actionStatus = root.lastError + } else { + root.lastError = "" + root.actionStatus = "Switched account" + actionStatusTimer.restart() + root._lastAccountsRefreshMs = 0 + } + delayedRefresh.restart() + } + } + + IpcHandler { + target: "omarchy.tailscale" + function refresh(): string { root.refresh(); return "ok" } + function toggle(): string { root.toggleTailscale(); return "ok" } + function up(): string { root.loginOrUp(); return "ok" } + function down(): string { root.runAction(["tailscale", "down"], "Turning Tailscale off…"); return "ok" } + function status(): string { return root.statusText } + } +} diff --git a/shell/plugins/tailscale/README.md b/shell/plugins/tailscale/README.md new file mode 100644 index 00000000..11d5cfc3 --- /dev/null +++ b/shell/plugins/tailscale/README.md @@ -0,0 +1,38 @@ +# Tailscale Omarchy Widget + +Native Omarchy bar widget for Tailscale. + +## Features + +- Shows Tailscale connection state in the bar +- Left click opens a keyboard-friendly panel +- Right click toggles Tailscale on/off +- Switch between logged-in Tailscale accounts when multiple are available +- Browse peers from `tailscale status --json` +- Copy a peer's Tailscale IP, host name, or DNS name + +## Keyboard shortcuts + +Inside the panel: + +- `j` / `k` or arrows: move cursor +- `enter` / `space`: activate current row +- `c`: copy selected peer IP +- `n`: copy selected peer name +- `d`: copy selected peer DNS name +- `t`: toggle Tailscale +- `r`: refresh status +- `esc`: close + +## Requirements + +- `tailscale` CLI on `PATH` +- `wl-copy` for clipboard copy actions + +## Icon + +Renders the Tailscale mark natively as a theme-colored 3×3 dot grid, matching the official SVG silhouette while avoiding tiny-SVG rendering quirks in the bar. + +## Add to the bar + +This widget ships as first-party plugin `omarchy.tailscale`. Add it through Omarchy's bar settings UI, or add an entry such as `{ "id": "omarchy.tailscale" }` to one of the `bar.layout` sections in `~/.config/omarchy/shell.json` and restart the shell. diff --git a/shell/plugins/tailscale/TailscaleIcon.qml b/shell/plugins/tailscale/TailscaleIcon.qml new file mode 100644 index 00000000..e0f3a1b5 --- /dev/null +++ b/shell/plugins/tailscale/TailscaleIcon.qml @@ -0,0 +1,72 @@ +import QtQuick +import qs.Commons + +Item { + id: root + + property real iconSize: Style.font.icon + property color color: Color.foreground + property color badgeColor: Color.urgent + property bool crossed: false + property bool warning: false + + width: iconSize + height: iconSize + implicitWidth: iconSize + implicitHeight: iconSize + + readonly property real dotSize: Math.max(2, root.iconSize * 0.24) + readonly property real mid: (root.iconSize - dotSize) / 2 + readonly property real end: root.iconSize - dotSize + + // Native rendering of the Tailscale mark from the SVG: a 3×3 dot grid + // with the inactive dots faded. This avoids Qt SVG/effect rendering quirks + // in tiny bar slots while keeping the official silhouette. + Dot { x: 0; y: 0; opacity: 0.24 } + Dot { x: root.mid; y: 0; opacity: 0.24 } + Dot { x: root.end; y: 0; opacity: 0.24 } + Dot { x: 0; y: root.mid; opacity: 1.0 } + Dot { x: root.mid; y: root.mid; opacity: 1.0 } + Dot { x: root.end; y: root.mid; opacity: 1.0 } + Dot { x: 0; y: root.end; opacity: 0.24 } + Dot { x: root.mid; y: root.end; opacity: 1.0 } + Dot { x: root.end; y: root.end; opacity: 0.24 } + + Rectangle { + visible: root.crossed + anchors.centerIn: parent + width: parent.width * 1.22 + height: Math.max(2, parent.height * 0.14) + radius: height / 2 + color: root.badgeColor + rotation: -45 + } + + Rectangle { + visible: root.warning + width: Math.max(7, parent.width * 0.42) + height: width + radius: width / 2 + color: root.badgeColor + anchors.right: parent.right + anchors.bottom: parent.bottom + border.color: Color.popups.background + border.width: 1 + + Text { + anchors.centerIn: parent + text: "!" + color: Color.background + font.family: Style.font.family + font.pixelSize: Math.max(6, parent.height * 0.72) + font.bold: true + } + } + + component Dot: Rectangle { + width: root.dotSize + height: root.dotSize + radius: width / 2 + color: root.color + } +} diff --git a/shell/plugins/tailscale/Widget.qml b/shell/plugins/tailscale/Widget.qml new file mode 100644 index 00000000..e9e916c7 --- /dev/null +++ b/shell/plugins/tailscale/Widget.qml @@ -0,0 +1,637 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import Quickshell +import qs.Commons +import qs.Ui + +BarWidget { + id: root + moduleName: "omarchy.tailscale" + + property bool popupOpen: false + property string focusSection: "header" + property int headerIndex: 0 + property int accountIndex: 0 + property int peerIndex: 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 color card: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.055) + readonly property string fontFamily: bar ? bar.fontFamily : Style.font.family + readonly property bool showAccounts: tailscale.accounts.length > 1 + readonly property bool showPeers: tailscale.peers.length > 0 + readonly property color iconColor: tailscale.running ? foreground : (tailscale.needsLogin ? urgent : dim) + + function close() { popupOpen = false } + + function openPanel() { + popupOpen = true + tailscale.refresh() + } + + function togglePanel() { + if (popupOpen) close() + else openPanel() + } + + function tooltipText() { + var lines = ["Tailscale: " + tailscale.statusText] + if (tailscale.selfIp !== "") lines.push(tailscale.selfName + " · " + tailscale.selfIp) + if (tailscale.selectedAccountLabel !== "") lines.push(tailscale.selectedAccountLabel) + if (tailscale.running) lines.push(tailscale.peers.length + " peer" + (tailscale.peers.length === 1 ? "" : "s")) + return lines.join("\n") + } + + function selectedPeer() { + if (tailscale.peers.length === 0) return null + return tailscale.peers[Math.max(0, Math.min(peerIndex, tailscale.peers.length - 1))] + } + + function selectedAccount() { + if (tailscale.accounts.length === 0) return null + return tailscale.accounts[Math.max(0, Math.min(accountIndex, tailscale.accounts.length - 1))] + } + + function ensureCursor() { + if (headerIndex < 0) headerIndex = 0 + if (headerIndex > 1) headerIndex = 1 + if (accountIndex >= tailscale.accounts.length) accountIndex = Math.max(0, tailscale.accounts.length - 1) + if (peerIndex >= tailscale.peers.length) peerIndex = Math.max(0, tailscale.peers.length - 1) + if (focusSection === "accounts" && !showAccounts) focusSection = showPeers ? "peers" : "header" + if (focusSection === "peers" && !showPeers) focusSection = showAccounts ? "accounts" : "header" + } + + function moveCursor(dx, dy) { + ensureCursor() + if (dy !== 0) { + if (focusSection === "header") { + if (dy > 0) { + if (showAccounts) focusSection = "accounts" + else if (showPeers) focusSection = "peers" + } + } else if (focusSection === "accounts") { + if (dy < 0) { + if (accountIndex <= 0) focusSection = "header" + else accountIndex-- + } else { + if (accountIndex < tailscale.accounts.length - 1) accountIndex++ + else if (showPeers) focusSection = "peers" + } + } else if (focusSection === "peers") { + if (dy < 0) { + if (peerIndex <= 0) focusSection = showAccounts ? "accounts" : "header" + else peerIndex-- + } else if (peerIndex < tailscale.peers.length - 1) { + peerIndex++ + } + } + } + if (dx !== 0 && focusSection === "header") headerIndex = (headerIndex + dx + 2) % 2 + ensureCursor() + scrollPeerIntoView() + } + + function activateCursor() { + ensureCursor() + if (focusSection === "header") { + if (headerIndex === 0) tailscale.toggleTailscale() + else tailscale.refresh() + } else if (focusSection === "accounts") { + var account = selectedAccount() + if (account) tailscale.switchAccount(account.id) + } else if (focusSection === "peers") { + tailscale.copyPeerIp(selectedPeer()) + } + } + + function scrollPeerIntoView() { + if (focusSection !== "peers" || !peerFlick || !peerColumn) return + Qt.callLater(function() { + if (root.focusSection !== "peers" || root.peerIndex < 0 || root.peerIndex >= peerColumn.children.length) return + var item = peerColumn.children[root.peerIndex] + if (!item) return + var margin = Style.space(6) + var top = item.y + var bottom = top + item.height + var viewTop = peerFlick.contentY + var viewBottom = viewTop + peerFlick.height + var maxY = Math.max(0, peerFlick.contentHeight - peerFlick.height) + if (top < viewTop + margin) peerFlick.contentY = Math.max(0, top - margin) + else if (bottom > viewBottom - margin) peerFlick.contentY = Math.min(maxY, bottom + margin - peerFlick.height) + }) + } + + function setPeerCursor(index) { + focusSection = "peers" + peerIndex = index + scrollPeerIntoView() + } + + function setAccountCursor(index) { + focusSection = "accounts" + accountIndex = index + } + + implicitWidth: button.implicitWidth + implicitHeight: button.implicitHeight + + onPopupOpenChanged: if (popupOpen) Qt.callLater(function() { keyCatcher.forceActiveFocus() }) + onPeerIndexChanged: scrollPeerIntoView() + onShowAccountsChanged: ensureCursor() + onShowPeersChanged: ensureCursor() + + Main { + id: tailscale + settings: root.settings + onPeersChanged: root.ensureCursor() + onAccountsChanged: root.ensureCursor() + } + + Item { + id: button + anchors.fill: parent + implicitWidth: root.bar && root.bar.vertical ? root.bar.barSize : Style.space(26) + implicitHeight: root.bar && root.bar.vertical ? Style.space(26) : (root.bar ? root.bar.barSize : Style.space(26)) + + property var registeredBar: null + readonly property bool tooltipHovered: mouseArea.containsMouse + + function triggerPress(buttonCode) { + if (root.bar) root.bar.hideTooltip(button) + if (buttonCode === Qt.RightButton) tailscale.toggleTailscale() + else if (buttonCode === Qt.MiddleButton) tailscale.refresh() + else root.togglePanel() + } + + function syncClickRegistration() { + if (registeredBar && registeredBar.unregisterClickTarget) registeredBar.unregisterClickTarget(button) + registeredBar = root.bar + if (registeredBar && registeredBar.registerClickTarget) registeredBar.registerClickTarget(button) + } + + Component.onCompleted: syncClickRegistration() + Component.onDestruction: if (registeredBar && registeredBar.unregisterClickTarget) registeredBar.unregisterClickTarget(button) + + Connections { + target: root + function onBarChanged() { button.syncClickRegistration() } + } + + TailscaleIcon { + anchors.centerIn: parent + iconSize: Style.space(12) + color: root.iconColor + badgeColor: root.urgent + crossed: !tailscale.running && !tailscale.needsLogin + warning: tailscale.needsLogin + } + + MouseArea { + id: mouseArea + anchors.fill: parent + acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onEntered: if (root.bar) root.bar.showTooltip(button, root.tooltipText()) + onExited: if (root.bar) root.bar.hideTooltip(button) + onClicked: function(mouse) { button.triggerPress(mouse.button) } + } + } + + KeyboardPanel { + id: panel + anchorItem: button + owner: root + bar: root.bar + open: root.popupOpen + focusTarget: keyCatcher + contentWidth: panel.fittedContentWidth(Style.space(400)) + contentHeight: panel.fittedContentHeight(column.implicitHeight, Style.space(580)) + + PanelKeyCatcher { + id: keyCatcher + anchors.fill: parent + onMoveRequested: function(dx, dy) { root.moveCursor(dx, dy) } + onActivateRequested: root.activateCursor() + onCloseRequested: root.close() + onTextKey: function(t) { + if (t === "r" || t === "R") tailscale.refresh() + else if (t === "t" || t === "T") tailscale.toggleTailscale() + else if (t === "c" || t === "C") tailscale.copyPeerIp(root.selectedPeer()) + else if (t === "n" || t === "N") tailscale.copyPeerName(root.selectedPeer()) + else if (t === "d" || t === "D") tailscale.copyPeerDnsName(root.selectedPeer()) + } + + Flickable { + id: panelFlick + anchors.fill: parent + contentWidth: width + contentHeight: column.implicitHeight + clip: true + boundsBehavior: Flickable.StopAtBounds + flickableDirection: Flickable.VerticalFlick + ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded } + + Column { + id: column + width: panelFlick.width + spacing: Style.space(12) + + Item { + id: header + width: parent.width + implicitHeight: Math.max(heroIcon.implicitHeight, heroText.implicitHeight, headerActions.implicitHeight) + + TailscaleIcon { + id: heroIcon + iconSize: Style.font.display + color: root.iconColor + badgeColor: root.urgent + crossed: !tailscale.running && !tailscale.needsLogin + warning: tailscale.needsLogin + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + } + + Column { + id: heroText + anchors.left: heroIcon.right + anchors.leftMargin: Style.space(12) + anchors.right: headerActions.left + anchors.rightMargin: Style.space(10) + anchors.verticalCenter: parent.verticalCenter + spacing: Style.space(2) + + Text { + width: parent.width + text: tailscale.installed ? (tailscale.selfName || "Tailscale") : "Tailscale" + color: root.foreground + font.family: root.fontFamily + font.pixelSize: Style.font.title + font.bold: true + elide: Text.ElideRight + } + + Text { + width: parent.width + text: { + var parts = [tailscale.statusText] + if (tailscale.selfIp !== "") parts.push(tailscale.selfIp) + if (tailscale.running) parts.push(tailscale.peers.length + " peer" + (tailscale.peers.length === 1 ? "" : "s")) + return parts.join(" · ").toUpperCase() + } + color: root.dim + font.family: root.fontFamily + font.pixelSize: Style.font.caption + font.bold: true + font.letterSpacing: 1.2 + elide: Text.ElideRight + } + } + + Row { + id: headerActions + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + spacing: Style.space(5) + + PanelActionButton { + id: toggleBtn + anchors.verticalCenter: parent.verticalCenter + iconText: "⏻" + fontSize: Style.font.heading + size: Style.space(30) + tooltipText: tailscale.running ? "Disconnect Tailscale" : (tailscale.needsLogin ? "Log in to Tailscale" : "Connect Tailscale") + foreground: root.foreground + hoverColor: tailscale.running ? root.urgent : root.foreground + fontFamily: root.fontFamily + hasCursor: root.focusSection === "header" && root.headerIndex === 0 + enabled: tailscale.installed && !tailscale.busy + onHovered: function(h) { + if (!h) return + root.focusSection = "header" + root.headerIndex = 0 + } + onClicked: tailscale.toggleTailscale() + } + + PanelActionButton { + id: refreshBtn + anchors.verticalCenter: parent.verticalCenter + iconText: "󰑐" + fontSize: Style.font.heading + size: Style.space(30) + tooltipText: "Refresh" + foreground: root.foreground + fontFamily: root.fontFamily + hasCursor: root.focusSection === "header" && root.headerIndex === 1 + enabled: !tailscale.busy + onHovered: function(h) { + if (!h) return + root.focusSection = "header" + root.headerIndex = 1 + } + onClicked: tailscale.refresh() + } + } + } + + Text { + visible: tailscale.actionStatus !== "" || tailscale.lastError !== "" + width: parent.width + text: tailscale.actionStatus !== "" ? tailscale.actionStatus : tailscale.lastError + color: tailscale.lastError !== "" && tailscale.actionStatus === "" ? root.urgent : root.dim + font.family: root.fontFamily + font.pixelSize: Style.font.bodySmall + wrapMode: Text.WordWrap + } + + Rectangle { + visible: !tailscale.installed + width: parent.width + implicitHeight: missingText.implicitHeight + Style.space(24) + color: root.card + border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.06) + border.width: Style.normalBorderWidth + radius: Style.cornerRadius + + Text { + id: missingText + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Style.space(12) + text: "Tailscale CLI is not installed or not on PATH." + color: root.dim + font.family: root.fontFamily + font.pixelSize: Style.font.bodySmall + wrapMode: Text.WordWrap + } + } + + PanelSeparator { + visible: root.showAccounts + foreground: root.foreground + } + + Column { + visible: root.showAccounts + width: parent.width + spacing: Style.space(10) + + PanelSectionHeader { + text: "ACCOUNTS" + foreground: root.foreground + fontFamily: root.fontFamily + } + + Repeater { + model: tailscale.accounts + AccountRow { + required property var modelData + required property int index + width: parent.width + account: modelData + rowIndex: index + } + } + } + + PanelSeparator { + visible: tailscale.installed + foreground: root.foreground + } + + Column { + visible: tailscale.installed + width: parent.width + spacing: Style.space(10) + + PanelSectionHeader { + text: "PEERS" + foreground: root.foreground + fontFamily: root.fontFamily + } + + Text { + visible: tailscale.installed && tailscale.running && tailscale.peers.length === 0 + width: parent.width + text: "No peers found on this tailnet." + color: root.dim + font.family: root.fontFamily + font.pixelSize: Style.font.bodySmall + horizontalAlignment: Text.AlignHCenter + } + + Text { + visible: tailscale.installed && !tailscale.running + width: parent.width + text: tailscale.needsLogin ? "Log in to see tailnet peers." : "Turn Tailscale on to see tailnet peers." + color: root.dim + font.family: root.fontFamily + font.pixelSize: Style.font.bodySmall + horizontalAlignment: Text.AlignHCenter + } + + Flickable { + id: peerFlick + visible: tailscale.peers.length > 0 + width: parent.width + height: Math.min(peerColumn.implicitHeight, Style.space(340)) + contentWidth: width + contentHeight: peerColumn.implicitHeight + clip: true + boundsBehavior: Flickable.StopAtBounds + ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded } + + Column { + id: peerColumn + width: peerFlick.width + spacing: Style.space(6) + + Repeater { + model: tailscale.peers + PeerRow { + required property var modelData + required property int index + width: peerColumn.width + peer: modelData + rowIndex: index + } + } + } + } + } + } + } + } + } + + component AccountRow: Rectangle { + id: accountRow + property var account: null + property int rowIndex: 0 + readonly property bool selectedAccount: account && account.selected === true + readonly property bool hasCursor: root.focusSection === "accounts" && root.accountIndex === rowIndex + + implicitHeight: row.implicitHeight + Style.space(12) + color: hasCursor ? Style.hoverFillFor(root.foreground, root.urgent) : (selectedAccount ? root.card : "transparent") + border.color: hasCursor ? Style.hoverBorderFor(root.foreground, root.urgent) : "transparent" + border.width: hasCursor ? Style.hoverBorderWidth : 0 + radius: Style.cornerRadius + + RowLayout { + id: row + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.leftMargin: Style.space(10) + anchors.rightMargin: Style.space(10) + spacing: Style.space(8) + + Text { + text: accountRow.selectedAccount ? "●" : "○" + color: accountRow.selectedAccount ? root.foreground : root.dim + font.family: root.fontFamily + font.pixelSize: Style.font.bodySmall + Layout.alignment: Qt.AlignVCenter + } + + ColumnLayout { + Layout.fillWidth: true + spacing: Style.space(1) + Text { + Layout.fillWidth: true + text: account ? (account.nickname || account.tailnet || account.account || account.id || "Account") : "Account" + color: root.foreground + font.family: root.fontFamily + font.pixelSize: Style.font.bodySmall + font.bold: true + elide: Text.ElideRight + } + Text { + Layout.fillWidth: true + text: account ? [account.tailnet || "", account.account || ""].filter(function(x) { return String(x) !== "" }).join(" · ") : "" + color: root.dim + font.family: root.fontFamily + font.pixelSize: Style.font.caption + elide: Text.ElideRight + } + } + } + + MouseArea { + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onEntered: root.setAccountCursor(accountRow.rowIndex) + onClicked: if (accountRow.account) tailscale.switchAccount(accountRow.account.id) + } + } + + component PeerRow: Rectangle { + id: peerRow + property var peer: null + property int rowIndex: 0 + readonly property bool online: peer && peer.Online === true + readonly property bool hasCursor: root.focusSection === "peers" && root.peerIndex === rowIndex + readonly property string peerName: peer ? String(peer.HostName || "Unknown") : "Unknown" + readonly property string peerIp: peer && peer.TailscaleIPs && peer.TailscaleIPs.length > 0 ? String(peer.TailscaleIPs[0]) : "" + readonly property string peerDns: peer ? String(peer.DNSName || "") : "" + + implicitHeight: Math.max(peerContent.implicitHeight, actions.implicitHeight) + Style.space(12) + color: hasCursor ? Style.hoverFillFor(root.foreground, root.urgent) : root.card + border.color: hasCursor ? Style.hoverBorderFor(root.foreground, root.urgent) : Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04) + border.width: hasCursor ? Style.hoverBorderWidth : Style.normalBorderWidth + radius: Style.cornerRadius + opacity: online ? 1.0 : 0.62 + + RowLayout { + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.leftMargin: Style.space(10) + anchors.rightMargin: Style.space(8) + spacing: Style.space(8) + + Text { + text: tailscale.osIcon(peer ? peer.OS : "") + color: root.foreground + font.family: root.fontFamily + font.pixelSize: Style.font.icon + Layout.alignment: Qt.AlignVCenter + } + + ColumnLayout { + id: peerContent + Layout.fillWidth: true + spacing: Style.space(1) + + Text { + Layout.fillWidth: true + text: peerRow.peerName + color: root.foreground + font.family: root.fontFamily + font.pixelSize: Style.font.bodySmall + font.bold: true + elide: Text.ElideRight + } + + Text { + Layout.fillWidth: true + text: { + var parts = [] + if (peerRow.peerIp !== "") parts.push(peerRow.peerIp) + if (peerRow.peerDns !== "") parts.push(peerRow.peerDns) + if (!peerRow.online) parts.push("offline") + return parts.join(" · ") + } + color: root.dim + font.family: root.fontFamily + font.pixelSize: Style.font.caption + elide: Text.ElideRight + } + } + + Row { + id: actions + spacing: Style.space(2) + Layout.alignment: Qt.AlignVCenter + + PanelActionButton { + iconText: "󰆏" + tooltipText: "Copy IP" + foreground: root.foreground + fontFamily: root.fontFamily + enabled: peerRow.peerIp !== "" + onClicked: tailscale.copyPeerIp(peerRow.peer) + } + + PanelActionButton { + iconText: "󰉿" + tooltipText: "Copy name" + foreground: root.foreground + fontFamily: root.fontFamily + enabled: peerRow.peerName !== "" + onClicked: tailscale.copyPeerName(peerRow.peer) + } + } + } + + MouseArea { + anchors.fill: parent + acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + z: -1 + onEntered: root.setPeerCursor(peerRow.rowIndex) + onClicked: function(mouse) { + if (mouse.button === Qt.RightButton) tailscale.copyPeerName(peerRow.peer) + else if (mouse.button === Qt.MiddleButton) tailscale.copyPeerDnsName(peerRow.peer) + else tailscale.copyPeerIp(peerRow.peer) + } + } + } +} diff --git a/shell/plugins/tailscale/manifest.json b/shell/plugins/tailscale/manifest.json new file mode 100644 index 00000000..71c78272 --- /dev/null +++ b/shell/plugins/tailscale/manifest.json @@ -0,0 +1,35 @@ +{ + "schemaVersion": 1, + "id": "omarchy.tailscale", + "name": "Tailscale", + "version": "1.0.0", + "author": "Omarchy", + "license": "MIT", + "description": "Tailscale status, account switching, peer browsing, and quick copy actions in the Omarchy bar.", + "kinds": [ + "bar-widget" + ], + "entryPoints": { + "barWidget": "Widget.qml" + }, + "barWidget": { + "displayName": "Tailscale", + "description": "Toggle Tailscale, switch accounts, browse peers, and copy peer IPs or names.", + "category": "Network", + "allowMultiple": false, + "defaults": { + "refreshIntervalSec": 30 + }, + "schema": [ + { + "key": "refreshIntervalSec", + "type": "integer", + "label": "Refresh interval (seconds)", + "min": 5, + "max": 3600, + "step": 5, + "defaultValue": 30 + } + ] + } +}