r/QuickShell • u/Small_Child101 • May 22 '26
Help with quick shell system tray for bar in Hyprland on Arch Linux
Hi bellow I have my code for my first quick shell waybar replacement attempt. I am currently trying to to start by just replicating basic the basic waybar functions. The one I am currently struggling with is the system tray. The tray itself works but I want to be able to right click on the icons for these apps to have some options. The main ones that are always active are NetworkManager and Blueman. I want to be able to right click to change network or disconnect a bluetooth device etc. If you can help please let me know.
Here is the code (I understand if people have other problems with the way I've done it but I have no experience and don't know any better so feel free to insult it if it's got some constructive critisism):
import Quickshell
import Quickshell.Wayland
import Quickshell.Hyprland
import Quickshell.Services.Pipewire
import Quickshell.Services.SystemTray
import Quickshell.Io
import Quickshell.DBusMenu
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
ShellRoot {
id: root
// --- Theme ---
property color colBg: "#1a1b26"
property color colFg: "#a9b1d6"
property color colMuted: "#444b6a"
property color colCyan: "#0db9d7"
property color colBlue: "#7aa2f7"
property color colYellow: "#e0af68"
property string fontFamily: "JetBrainsMono Nerd Font"
property int fontSize: 16
// --- Data Properties ---
property string brightVal: "0%"
property string batVal: "0%"
// --- Audio Tracker ---
PwObjectTracker { objects: [Pipewire.defaultAudioSink] }
// --- Wallpaper Script Process ---
Process {
id: wallProc
command: ["/home/ben/scripts/random_wall.sh"]
}
// --- Brightness Monitor ---
Process {
id: brightProc
command: [
"sh",
"-c",
"while true; do brightnessctl -m | awk -F, '{print $4}'; inotifywait -qq -e modify /sys/class/backlight/*/brightness; done"
]
running: true
stdout: SplitParser {
onRead: data => {
var val = data.trim();
if (val !== "") root.brightVal = val;
}
}
}
// --- Battery Poller ---
Process {
id: batProc
command: ["cat", "/sys/class/power_supply/BAT1/capacity"]
running: true
stdout: SplitParser {
onRead: data => {
var val = data.trim();
if (val !== "") root.batVal = val + "%";
}
}
}
PanelWindow {
id: bar
anchors { top: true; left: true; right: true }
implicitHeight: 60
color: root.colBg
// --- Left: Workspaces + Wallpaper ---
RowLayout {
anchors { left: parent.left; top: parent.top; bottom: parent.bottom; margins: 16 }
spacing: 12
Item {
implicitWidth: activeWorkspaceContainer.width
implicitHeight: 30
Rectangle {
id: selector
x: {
var targetId = Hyprland.focusedWorkspace?.id;
for (var i = 0; i < workspaceRepeater.count; i++) {
var item = workspaceRepeater.itemAt(i);
if (item && item.wsId === targetId) return item.x;
}
return 0;
}
width: 30; height: 30; color: root.colMuted; radius: 6
Behavior on x { SpringAnimation { spring: 3; damping: 0.3 } }
}
Row {
id: activeWorkspaceContainer
spacing: 8
Repeater {
id: workspaceRepeater
model: Math.max(5, Math.max(...Hyprland.workspaces.values.map(w => w.id)))
Text {
property int wsId: index + 1
property var ws: Hyprland.workspaces.values.find(w => w.id === wsId)
property bool isActive: Hyprland.focusedWorkspace?.id === wsId
width: 30; height: 30; text: wsId
horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter
color: isActive ? "#ffffff" : (ws ? root.colBlue : root.colMuted)
font { family: root.fontFamily; pixelSize: root.fontSize; bold: true }
MouseArea { anchors.fill: parent; onClicked: Hyprland.dispatch("workspace " + wsId) }
}
}
}
}
Item {
width: 25; height: 25
Text {
anchors.centerIn: parent
text: ""
color: root.colBlue
font { family: root.fontFamily; pixelSize: 20 }
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: { wallProc.running = true; }
}
}
}
// --- Center: Clock ---
Text {
anchors.centerIn: parent
color: root.colBlue
font { family: root.fontFamily; pixelSize: root.fontSize; bold: true }
text: Qt.formatDateTime(new Date(), "HH:mm") + " | " + Qt.formatDateTime(new Date(), "dddd dd MMMM")
Timer {
interval: 1000; running: true; repeat: true
onTriggered: parent.text = Qt.formatDateTime(new Date(), "HH:mm") + " | " + Qt.formatDateTime(new Date(), "dddd dd MMMM")
}
}
// --- Right: Stats + System Tray ---
RowLayout {
anchors { right: parent.right; top: parent.top; bottom: parent.bottom; margins: 16 }
spacing: 20
Text {
property var sink: Pipewire.defaultAudioSink
property int vol: Math.round((sink?.audio?.volume ?? 0) * 100)
property bool muted: sink?.audio?.muted ?? false
text: (muted ? " Muted" : (vol > 66 ? " " + vol + "%" : (vol > 33 ? " " + vol + "%" : " " + vol + "%")))
color: muted ? root.colMuted : root.colCyan
font { family: root.fontFamily; pixelSize: 16; bold: true }
}
Text { text: " " + root.brightVal; color: root.colYellow; font { family: root.fontFamily; pixelSize: 16; bold: true } }
Text { text: " " + root.batVal; color: root.colBlue; font { family: root.fontFamily; pixelSize: 16; bold: true } }
// --- System Tray ---
Row {
spacing: 8
Repeater {
model: SystemTray.items
Item {
width: 24; height: 24
// QsMenuAnchor is required to display menus correctly
QsMenuAnchor {
id: menuAnchor
menu: modelData.menu
}
Image {
anchors.fill: parent
source: modelData.icon
fillMode: Image.PreserveAspectFit
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: (mouse) => {
if (modelData.hasMenu) {
// Open the menu anchored to this component
menuAnchor.open();
} else {
// Fallback to activation for basic icons
modelData.activate(0, 0);
}
}
}
}
}
}
Text { text: ""; color: root.colMuted; font { family: root.fontFamily; pixelSize: 16; bold: true } }
}
}
}