feat: rebuild the interface after Haruna

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/qml/VolumeSlider.qml

@@ -0,0 +1,55 @@
+// SPDX-FileCopyrightText: 2020 George Florea Bănuș <georgefb899@gmail.com>
+// SPDX-FileCopyrightText: 2026 Tri Vo Khac
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick
+import QtQuick.Controls
+import org.kde.kirigami as Kirigami
+import org.kde.ki18n
+
+// Flat volume bar with the value written on it, as in Haruna.
+Slider {
+    id: root
+
+    required property MpvItem mpv
+
+    from: 0
+    to: root.mpv.volumeMax
+    implicitWidth: 100
+    implicitHeight: 25
+    wheelEnabled: true
+    stepSize: QtPotatoSettings.volumeStep
+    focusPolicy: Qt.NoFocus
+    leftPadding: 0
+    rightPadding: 0
+
+    handle: Item { visible: false }
+
+    background: Rectangle {
+        color: Kirigami.Theme.alternateBackgroundColor
+        scale: root.mirrored ? -1 : 1
+
+        Rectangle {
+            width: root.visualPosition * parent.width
+            height: parent.height
+            color: Kirigami.Theme.highlightColor
+        }
+    }
+
+    onMoved: root.mpv.volume = Math.round(value)
+
+    // Follow mpv, but not while the user drags (dragging replaces a plain binding).
+    Binding on value {
+        value: root.mpv.volume
+        when: !root.pressed
+        restoreMode: Binding.RestoreNone
+    }
+
+    Label {
+        anchors.centerIn: root
+        text: root.mpv.mute ? KI18n.i18nc("@info volume muted", "Muted") : Math.round(root.value)
+        color: "#fff"
+        style: Text.Outline
+        styleColor: "#111"
+    }
+}