feat(quickshell): show microphone status separately

home/bin/desktop/executable_quickshell-start.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+# Start the Quickshell bar on the current Wayland session.
+
+qs -c bar kill 2>/dev/null || true
+qs -c bar --daemonize

home/bin/installers/executable_sway-install.sh

@@ -3,4 +3,4 @@
 # Import library
 source $(dirname ${BASH_SOURCE[0]})/install-lib.sh
 
-sudo $(packageManager) install sway waybar rofi mako alacritty
+sudo $(packageManager) install sway waybar quickshell rofi mako alacritty brightnessctl

home/bin/system/executable_system-start.sh

@@ -5,9 +5,12 @@ pass git pull
 
 # Desktop
 ~/bin/connect-nas.sh
+if [ "${XDG_SESSION_TYPE}" = "wayland" ]; then
+  ~/bin/desktop/quickshell-start.sh
+else
   systemctl --user start polybar
+fi
 systemctl --user restart streamdeck
-waybar &
 /usr/libexec/polkit-gnome-authentication-agent-1 &
 
 # Keyring

home/dot_config/quickshell/bar/Backlight.qml

@@ -0,0 +1,42 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Block {
+    id: root
+
+    property int percentage: -1
+
+    visible: percentage >= 0
+    blockColor: "#2980b9"
+    interactive: true
+    text: "\uf185  " + percentage + "%"
+    onWheel: wheel => {
+        const change = wheel.angleDelta.y > 0 ? "+5%" : "5%-";
+        Quickshell.execDetached(["brightnessctl", "set", change]);
+        refreshTimer.restart();
+    }
+
+    Process {
+        id: brightnessQuery
+        command: ["brightnessctl", "-m"]
+        running: true
+
+        stdout: StdioCollector {
+            onStreamFinished: {
+                const fields = text.trim().split(",");
+                root.percentage = fields.length >= 4
+                    ? parseInt(fields[3].replace("%", ""))
+                    : -1;
+            }
+        }
+    }
+
+    Timer {
+        id: refreshTimer
+        interval: 500
+        repeat: true
+        running: true
+        onTriggered: brightnessQuery.running = true
+    }
+}

home/dot_config/quickshell/bar/Bar.qml

@@ -0,0 +1,243 @@
+import QtQuick
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Services.Pipewire
+import Quickshell.Services.SystemTray
+import Quickshell.Services.UPower
+import Quickshell.Widgets
+
+PanelWindow {
+    id: bar
+
+    property var sink: Pipewire.defaultAudioSink
+    property var source: Pipewire.defaultAudioSource
+    property var battery: UPower.displayDevice
+
+    anchors {
+        top: true
+        left: true
+        right: true
+    }
+    implicitHeight: 38
+    color: "#80000000"
+
+    PwObjectTracker {
+        objects: [bar.sink, bar.source]
+    }
+
+    SystemClock {
+        id: clock
+        precision: SystemClock.Seconds
+    }
+
+    Row {
+        id: leftModules
+        anchors {
+            left: parent.left
+            top: parent.top
+            bottom: parent.bottom
+        }
+        spacing: 8
+
+        Row {
+            height: parent.height
+            spacing: 0
+
+            Repeater {
+                model: Hyprland.workspaces
+
+                Rectangle {
+                    id: workspaceButton
+
+                    required property var modelData
+                    property bool active: modelData.active
+
+                    visible: modelData.id > 0
+                    width: 34
+                    height: parent.height
+                    color: modelData.urgent ? "#e91e63"
+                        : active ? "#0288d1" : "transparent"
+
+                    Rectangle {
+                        anchors {
+                            left: parent.left
+                            right: parent.right
+                            bottom: parent.bottom
+                        }
+                        height: 3
+                        color: workspaceButton.active ? "#b3e5fc" : "transparent"
+                    }
+
+                    Text {
+                        anchors.centerIn: parent
+                        text: modelData.id === 2 ? "\uf120"
+                            : modelData.id === 13 ? "\uf001" : modelData.name
+                        color: "#ffffff"
+                        font.family: "SF Pro Display, Font Awesome 6 Free"
+                        font.pixelSize: 18
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: Quickshell.execDetached([
+                            "hyprctl",
+                            "dispatch",
+                            "hl.dsp.focus({ workspace = " + workspaceButton.modelData.id + " })"
+                        ])
+                    }
+                }
+            }
+        }
+    }
+
+    Text {
+        anchors.centerIn: parent
+        width: Math.max(0, Math.min(implicitWidth,
+            parent.width - leftModules.width - rightModules.width - 32))
+        elide: Text.ElideRight
+        horizontalAlignment: Text.AlignHCenter
+        text: Hyprland.activeToplevel ? Hyprland.activeToplevel.title : ""
+        color: "#ffffff"
+        font.family: "SF Pro Display, Helvetica, Arial, sans-serif"
+        font.pixelSize: 18
+    }
+
+    Row {
+        id: rightModules
+        anchors {
+            right: parent.right
+            top: parent.top
+            bottom: parent.bottom
+            rightMargin: 4
+        }
+        spacing: 8
+
+        Block {
+            id: audioBlock
+            blockColor: bar.sink && bar.sink.audio && bar.sink.audio.muted
+                ? "#ffffff" : "#0288d1"
+            textColor: bar.sink && bar.sink.audio && bar.sink.audio.muted
+                ? "#000000" : "#ffffff"
+            interactive: true
+            text: {
+                if (!bar.sink || !bar.sink.audio)
+                    return "\uf026";
+                return bar.sink.audio.muted
+                    ? "\uf026" : "\uf028 " + Math.round(bar.sink.audio.volume * 100) + "%";
+            }
+            secondaryIcon: bar.source && bar.source.audio
+                ? (bar.source.audio.muted
+                    ? "file://" + Quickshell.shellPath("icons/microphone-muted.svg")
+                    : "file://" + Quickshell.shellPath("icons/microphone.svg"))
+                : ""
+            secondaryText: bar.source && bar.source.audio
+                ? (bar.source.audio.muted ? "OFF"
+                    : Math.round(bar.source.audio.volume * 100) + "%")
+                : ""
+            onClicked: mouse => {
+                if (mouse.button === Qt.MiddleButton && bar.sink && bar.sink.audio)
+                    bar.sink.audio.muted = !bar.sink.audio.muted;
+                else
+                    Quickshell.execDetached(["qjackctl"]);
+            }
+            onWheel: wheel => {
+                if (!bar.sink || !bar.sink.audio)
+                    return;
+                const change = wheel.angleDelta.y > 0 ? 0.05 : -0.05;
+                bar.sink.audio.volume = Math.max(0, Math.min(1.5,
+                    bar.sink.audio.volume + change));
+            }
+        }
+
+        Network {}
+        Backlight {}
+
+        Block {
+            property int percentage: Math.round(bar.battery.percentage * 100)
+
+            visible: bar.battery.ready && bar.battery.isLaptopBattery
+            blockColor: percentage <= 15 && UPower.onBattery
+                ? "#e91e63" : UPower.onBattery ? "#ffffff" : "#2980b9"
+            textColor: UPower.onBattery && percentage > 15
+                ? "#000000" : "#ffffff"
+            text: {
+                if (!UPower.onBattery)
+                    return "\uf1e6  " + percentage + "%";
+                if (percentage <= 10) return "\uf244  " + percentage + "%";
+                if (percentage <= 35) return "\uf243  " + percentage + "%";
+                if (percentage <= 60) return "\uf242  " + percentage + "%";
+                if (percentage <= 85) return "\uf241  " + percentage + "%";
+                return "\uf240  " + percentage + "%";
+            }
+        }
+
+        Rectangle {
+            visible: trayRepeater.count > 0
+            implicitWidth: trayItems.implicitWidth + 20
+            implicitHeight: 32
+            color: "#0288d1"
+
+            Row {
+                id: trayItems
+                anchors.centerIn: parent
+                spacing: 10
+
+                Repeater {
+                    id: trayRepeater
+                    model: SystemTray.items
+
+                    Item {
+                        id: trayItem
+
+                        required property var modelData
+                        width: 26
+                        height: 30
+
+                        IconImage {
+                            anchors {
+                                fill: parent
+                                margins: 3
+                            }
+                            source: trayItem.modelData.icon
+                            opacity: trayMouse.containsMouse ? 1 : 0.82
+
+                            Behavior on opacity {
+                                NumberAnimation { duration: 120 }
+                            }
+                        }
+
+                        MouseArea {
+                            id: trayMouse
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.RightButton
+                            onClicked: mouse => {
+                                if (mouse.button === Qt.MiddleButton)
+                                    trayItem.modelData.secondaryActivate();
+                                else if (mouse.button === Qt.RightButton || trayItem.modelData.onlyMenu) {
+                                    const point = mapToItem(bar.contentItem, 0, height);
+                                    trayItem.modelData.display(bar, point.x, point.y);
+                                } else {
+                                    trayItem.modelData.activate();
+                                }
+                            }
+                            onWheel: wheel => trayItem.modelData.scroll(
+                                wheel.angleDelta.y, false)
+                        }
+                    }
+                }
+            }
+        }
+
+        Block {
+            property bool detailed: false
+
+            interactive: true
+            text: Qt.formatDateTime(clock.date,
+                detailed ? "yyyy-MM-dd hh:mm:ss" : "hh:mm")
+            onClicked: detailed = !detailed
+        }
+    }
+}

home/dot_config/quickshell/bar/Block.qml

@@ -0,0 +1,59 @@
+import QtQuick
+import Quickshell.Widgets
+
+Rectangle {
+    id: root
+
+    property color blockColor: "#0288d1"
+    property color textColor: "#ffffff"
+    property bool interactive: false
+    property string text: ""
+    property string fontFamily: "SF Pro Display, Font Awesome 6 Free"
+    property string secondaryIcon: ""
+    property string secondaryText: ""
+    signal clicked(var mouse)
+    signal wheel(var wheel)
+
+    implicitWidth: content.implicitWidth + 20
+    implicitHeight: 32
+    color: blockColor
+
+    Row {
+        id: content
+        anchors.centerIn: parent
+        spacing: 7
+
+        Text {
+            text: root.text
+            color: root.textColor
+            font.family: root.fontFamily
+            font.pixelSize: 18
+        }
+
+        IconImage {
+            width: 18
+            height: 18
+            anchors.verticalCenter: parent.verticalCenter
+            visible: root.secondaryIcon !== ""
+            source: root.secondaryIcon
+        }
+
+        Text {
+            anchors.verticalCenter: parent.verticalCenter
+            visible: root.secondaryText !== ""
+            text: root.secondaryText
+            color: root.textColor
+            font.family: root.fontFamily
+            font.pixelSize: 18
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        enabled: root.interactive
+        acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.RightButton
+        cursorShape: Qt.PointingHandCursor
+        onClicked: mouse => root.clicked(mouse)
+        onWheel: wheel => root.wheel(wheel)
+    }
+}

home/dot_config/quickshell/bar/Network.qml

@@ -0,0 +1,51 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Block {
+    id: root
+
+    property string connection: "Disconnected"
+    property bool connected: connection !== "Disconnected"
+
+    blockColor: connected ? "#2980b9" : "#e91e63"
+    interactive: true
+    text: connected ? "\uf1eb  " + connection : "Disconnected !"
+    onClicked: Quickshell.execDetached(["nm-connection-editor"])
+
+    Process {
+        id: networkQuery
+        command: ["nmcli", "-t", "-f", "TYPE,NAME", "connection", "show", "--active"]
+        running: true
+
+        stdout: StdioCollector {
+            onStreamFinished: {
+                const lines = text.trim().split("\n");
+                for (let line of lines) {
+                    const separator = line.indexOf(":");
+                    const type = line.slice(0, separator);
+                    if (type === "802-11-wireless" || type === "wifi") {
+                        root.connection = line.slice(separator + 1);
+                        return;
+                    }
+                }
+                for (let line of lines) {
+                    const separator = line.indexOf(":");
+                    const type = line.slice(0, separator);
+                    if (type === "802-3-ethernet" || type === "ethernet") {
+                        root.connection = line.slice(separator + 1);
+                        return;
+                    }
+                }
+                root.connection = "Disconnected";
+            }
+        }
+    }
+
+    Timer {
+        interval: 5000
+        repeat: true
+        running: true
+        onTriggered: networkQuery.running = true
+    }
+}

home/dot_config/quickshell/bar/icons/microphone-muted.svg

@@ -0,0 +1,6 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#ffffff">
+    <path d="M8 1C6.34 1 5 2.34 5 4v4c0 1.66 1.34 3 3 3 .36 0 .7-.07 1.02-.18.04-.45.23-.89.57-1.23.33-.33.77-.54 1.23-.58.11-.32.18-.66.18-1.01V4c0-1.66-1.34-3-3-3zm0 2c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1s-1-.45-1-1V4c0-.55.45-1 1-1zM2 7v1.01c0 2.96 2.16 5.42 5 5.9V16h2v-2.09c.13-.02.25-.05.38-.08a2 2 0 0 1 .21-.24l.41-.42v-.34l-.41-.42a2 2 0 0 1-.15-.16A4.5 4.5 0 0 1 3.5 8.01V7z" opacity=".7"/>
+    <path d="M11 10a1 1 0 0 0-.71 1.71L11.59 13l-1.3 1.29a1 1 0 1 0 1.42 1.42L13 14.41l1.29 1.3a1 1 0 1 0 1.42-1.42L14.41 13l1.3-1.29a1 1 0 1 0-1.42-1.42L13 11.59l-1.29-1.3A1 1 0 0 0 11 10z"/>
+  </g>
+</svg>

home/dot_config/quickshell/bar/icons/microphone.svg

@@ -0,0 +1,3 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 0C6.34 0 5 1.34 5 3v5c0 1.66 1.34 3 3 3s3-1.34 3-3V3c0-1.66-1.34-3-3-3zM2 6v2.01c0 2.96 2.16 5.43 5 5.91V16h2v-2.08c2.84-.48 5-2.94 5-5.91V6h-1.5v2.01c0 2.5-1.99 4.49-4.5 4.49s-4.5-1.99-4.5-4.49V6z" fill="#ffffff"/>
+</svg>

home/dot_config/quickshell/bar/shell.qml

@@ -0,0 +1,12 @@
+import Quickshell
+
+ShellRoot {
+    Variants {
+        model: Quickshell.screens
+
+        Bar {
+            required property var modelData
+            screen: modelData
+        }
+    }
+}