import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Wayland
import "../theme"
import ".."
// Nerd Font glyphs (JetBrainsMono Nerd Font, installed system-wide)
// \uF1EB wifi \uF796 ethernet \uF538 memory \uF1C0 disk
// \uF028 volume \uF185 brightness \uF240 battery \uF0E7 charging
// \uF017 clock \uF2DB cpu
PanelWindow {
id: root
property var modelData
screen: modelData
anchors {
top: true
left: true
right: true
}
margins.left: Theme.sidebarWidth
implicitHeight: Theme.topStripHeight
color: Qt.rgba(Theme.bgPrimary.r, Theme.bgPrimary.g, Theme.bgPrimary.b, 0.92)
exclusiveZone: Theme.topStripHeight
WlrLayershell.layer: WlrLayer.Top
WlrLayershell.namespace: "quickshell-topstrip"
WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
Rectangle {
id: bottomBorder
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
}
height: 1
color: Theme.glassBorder
}
// --------------------------------------------------------------------
// Helpers to compose rich-text status segments
// --------------------------------------------------------------------
function pad(num) {
if (num === undefined || num === null) return "00";
return num < 10 ? "0" + num : num.toString();
}
function seg(icon, value, iconColor, valueColor) {
return "" + icon + " " + value + "";
}
function buildStats() {
const c = "#e5e2e1";
const dim = "#adaaaa";
const volt = "#CFFC00";
const coral = "#FF7A59";
const sep = " // ";
const parts = [];
// Network: type icon + SSID (wifi) + IP
if (GlobalState.wifiConnected) {
const icon = GlobalState.connectionType === "wifi" ? "\uF1EB" : "\uF796";
const label = (GlobalState.connectionType === "wifi" && GlobalState.wifiSsid !== "") ? GlobalState.wifiSsid : "eth";
parts.push(seg(icon, label + " " + (GlobalState.ipAddress !== "" ? GlobalState.ipAddress : "\u2014"), volt, c));
} else {
parts.push(seg("\uF1EB", "offline", coral, dim));
}
// Memory (used GB / total GB)
parts.push(seg("\uF538", GlobalState.memUsedGb + "G / " + GlobalState.memTotalGb + "G",
GlobalState.memPercent > 85 ? coral : dim, c));
// Disk (root filesystem percent)
parts.push(seg("\uF1C0", GlobalState.diskPercent + "%",
GlobalState.diskPercent > 90 ? coral : dim, c));
// Audio (mute state flips icon + color)
if (GlobalState.volumeMuted) {
parts.push(seg("\uF026", "mute", coral, dim));
} else {
parts.push(seg("\uF028", GlobalState.volume + "%", dim, c));
}
// Display brightness
parts.push(seg("\uF185", GlobalState.brightness + "%", dim, c));
// Battery (only when present, e.g. laptops)
if (GlobalState.batteryPresent) {
const icon = GlobalState.batteryCharging ? "\uF0E7" : "\uF240";
parts.push(seg(icon, GlobalState.batteryPercent + "%",
GlobalState.batteryPercent < 20 ? coral : dim, c));
}
return parts.join(sep);
}
RowLayout {
anchors.fill: parent
anchors.leftMargin: 16
anchors.rightMargin: 16
spacing: 16
// Left Section: workspace indicator
Text {
id: workspaceIndicator
Layout.alignment: Qt.AlignVCenter
textFormat: Text.RichText
font.family: "JetBrainsMono Nerd Font"
font.pixelSize: 12
text: {
const name = GlobalState.workspaceNames[GlobalState.activeWorkspace] !== undefined
? GlobalState.workspaceNames[GlobalState.activeWorkspace] : "main";
return "" + pad(GlobalState.activeWorkspace) + ""
+ " // "
+ "" + name + "";
}
}
// Center Section: focused window title
Text {
id: windowTitle
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.family: Theme.fontSerif
font.italic: true
font.pixelSize: Theme.fontSizeLarge
color: Theme.textSecondary
elide: Text.ElideRight
maximumLineCount: 1
text: GlobalState.activeWindowTitle
Behavior on color {
ColorAnimation { duration: 150 }
}
}
// Right Section: live system stats (click to open the System HUD)
Text {
id: stats
Layout.alignment: Qt.AlignVCenter
textFormat: Text.RichText
font.family: "JetBrainsMono Nerd Font"
font.pixelSize: 11
text: buildStats()
MouseArea {
id: statsMouse
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: GlobalState.toggleSystemHud()
}
}
// Clock
Text {
id: clock
Layout.alignment: Qt.AlignVCenter
textFormat: Text.RichText
font.family: "JetBrainsMono Nerd Font"
font.pixelSize: 12
text: "\uF017"
+ " " + GlobalState.timeString + ""
}
}
}