NixOS-Configs/home/hypr/quickshell/components/TopStrip.qml

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 "<font color=\"" + iconColor + "\">" + icon + "</font><font color=\"" + valueColor + "\"> " + value + "</font>";
    }

    function buildStats() {
        const c = "#e5e2e1";
        const dim = "#adaaaa";
        const volt = "#CFFC00";
        const coral = "#FF7A59";
        const sep = "<font color=\"#2a2929\">  //  </font>";
        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 "<font color=\"#CFFC00\">" + pad(GlobalState.activeWorkspace) + "</font>"
                     + "<font color=\"#2a2929\"> // </font>"
                     + "<font color=\"#adaaaa\">" + name + "</font>";
            }
        }

        // 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: "<font color=\"#adaaaa\">\uF017</font>"
                + "<font color=\"#ffffff\"> " + GlobalState.timeString + "</font>"
        }
    }
}