feat: Alias for Audio Devices

- New custom audio UI to set custom names for input/output devices
2026-04-11 08:12:09 -04:00 · 2026-02-04 07:09:55 -05:00
parent 6e3b3ce888
commit 961680af8c
5 changed files with 983 additions and 8 deletions
--- a/quickshell/Modules/Settings/Widgets/DeviceAliasRow.qml
+++ b/quickshell/Modules/Settings/Widgets/DeviceAliasRow.qml
@@ -0,0 +1,155 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    required property var deviceNode
+    property string deviceType: "output"
+
+    signal editRequested(var deviceNode)
+    signal resetRequested(var deviceNode)
+
+    width: parent?.width ?? 0
+    height: deviceRowContent.height + Theme.spacingM * 2
+    radius: Theme.cornerRadius
+    color: deviceMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+    readonly property bool hasCustomAlias: AudioService.hasDeviceAlias(deviceNode?.name ?? "")
+    readonly property string displayedName: AudioService.displayName(deviceNode)
+
+    Row {
+        id: deviceRowContent
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.leftMargin: Theme.spacingM
+        anchors.rightMargin: Theme.spacingM
+        spacing: Theme.spacingM
+
+        DankIcon {
+            name: root.deviceType === "input" ? "mic" : "speaker"
+            size: Theme.iconSize
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Column {
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width - Theme.iconSize - Theme.spacingM * 3 - buttonsRow.width
+            spacing: 2
+
+            StyledText {
+                text: root.displayedName
+                font.pixelSize: Theme.fontSizeMedium
+                font.weight: Font.Medium
+                color: Theme.surfaceText
+                width: parent.width
+                elide: Text.ElideRight
+            }
+
+            Column {
+                width: parent.width
+                spacing: 2
+
+                Row {
+                    width: parent.width
+                    spacing: Theme.spacingS
+
+                    StyledText {
+                        text: root.deviceNode?.name ?? ""
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceVariantText
+                        width: parent.width - (customAliasLabel.visible ? customAliasLabel.width + Theme.spacingS : 0)
+                        elide: Text.ElideRight
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    Rectangle {
+                        id: customAliasLabel
+                        visible: root.hasCustomAlias
+                        height: customAliasText.implicitHeight + 4
+                        width: customAliasText.implicitWidth + Theme.spacingS * 2
+                        radius: 3
+                        color: Theme.withAlpha(Theme.primary, 0.15)
+                        anchors.verticalCenter: parent.verticalCenter
+
+                        StyledText {
+                            id: customAliasText
+                            text: I18n.tr("Custom")
+                            font.pixelSize: Theme.fontSizeSmall - 1
+                            color: Theme.primary
+                            font.weight: Font.Medium
+                            anchors.centerIn: parent
+                        }
+                    }
+                }
+
+                StyledText {
+                    visible: root.hasCustomAlias
+                    text: I18n.tr("Original: %1").arg(AudioService.originalName(root.deviceNode))
+                    font.pixelSize: Theme.fontSizeSmall - 1
+                    color: Theme.surfaceVariantText
+                    width: parent.width
+                    elide: Text.ElideRight
+                    opacity: 0.6
+                }
+            }
+        }
+
+        Row {
+            id: buttonsRow
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: Theme.spacingS
+
+            DankActionButton {
+                id: resetButton
+                visible: root.hasCustomAlias
+                buttonSize: 36
+                iconName: "restart_alt"
+                iconSize: 20
+                backgroundColor: Theme.surfaceContainerHigh
+                iconColor: Theme.surfaceVariantText
+                tooltipText: I18n.tr("Reset to default name")
+                anchors.verticalCenter: parent.verticalCenter
+                onClicked: {
+                    root.resetRequested(root.deviceNode);
+                }
+            }
+
+            DankActionButton {
+                id: editButton
+                buttonSize: 36
+                iconName: "edit"
+                iconSize: 20
+                backgroundColor: Theme.buttonBg
+                iconColor: Theme.buttonText
+                tooltipText: I18n.tr("Set custom name")
+                anchors.verticalCenter: parent.verticalCenter
+                onClicked: {
+                    root.editRequested(root.deviceNode);
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        id: deviceMouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        propagateComposedEvents: true
+        z: -1
+    }
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+}